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内 容 特色 

《ER 囊括 了 HTML 的 所 有 元 素 和 相应 属性 

6 于 3 用 实例 演示 了 各 个 元 素 ， 这 些 例 子 可 以 直接 应 用 到 项 目 中 
(GE 二 琴 对 每 个 实例 都 给 出 执行 效果 ， 方 便 学 习 

6 委 本 二 最 后 给 出 了 一 个 商业 案例 ， 告 诉 读者 如 何 综合 应 用 各 种 技术 


“未 书 看 点 


67 个 元 素 +223 个 属性 +363 个 实例 +87 个 习题 16894 行 代码 = 网 页 开发 高 手 


光盘 内 容 EVD 
。 342 个 实例 。 赠送 485 页 PPT 文 档 
。 15 小 时 视频 讲解 。930 页 电子 书 学 习 资料 
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QQ 群 : 21948169 
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内 容 简 介 


HTML 是 目前 最 流行 的 网 页 制作 语言 。 互 联网 中 的 网 页 大 多 数 都 是 使 用 HTML 格式 展示 在 浏览 者 面 
前 的 。 随 着 Web 2.0 概念 的 提出 ， 要 求 网 页 具有 更 好 的 扩展 性 和 用 户 体验 ， 这 使 得 CSS 样式 表 在 网 页 设 
计 中 变 得 越 来 越 重 要 。 为 了 能 让 广大 的 网 页 制作 者 快速 地 掌握 网 页 制作 的 技巧 和 方法 ， 本 书 的 第 一 部 分 以 
语法 和 实例 相 结合 的 形式 详细 讲解 了 HTML 语言 中 各 个 元 素 及 其 属性 的 作用 、 语 法 和 显示 效果 。 第 二 部 
分 从 CSS 基本 概念 开始 ， 分 别 讲解 了 CSS 盒 模型 和 定位 属性 ，CSS 控制 各 种 元 素 显示 的 方法 ，CSS 布局 
页 面 的 技巧 等 知识 。 最 后 一 部 分 为 了 增强 读者 的 实战 能 力 ， 以 个 人 博客 制作 的 形式 详细 为 读者 演示 了 使 用 
HTML 和 CSS 制作 页 面 的 过 程 。 为 了 便于 理解 ， 本 书 对 所 讲解 的 每 个 元 素 和 属性 ， 都 做 了 实例 演示 。 

为 了 方便 读者 学 习 ， 本 书 光 盘 中 提供 了 丰富 的 内 容 ， 包 括 全 书 的 多 媒体 视频 演示 、 全 书 的 电子 教案 、 
900 多 页 的 电子 资料 以 及 书 中 讲解 的 源 代码 等 内 容 。 对 于 每 章 后 面 的 习题 ， 笔 者 都 给 了 相应 的 解答 ， 读 者 
可 以 到 http://www.tupwk.com.cn/ 网 站 下 载 。 

本 书 适合 广大 Web 网 站 设计 人 员 、 网 站 设计 的 初学 者 、 网 站 管理 维护 人 员 、 大 专 院 校 学 生 和 社会 培 
训 学 生 阅 读 ， 并 可 作为 网 站 开发 人 员 的 参考 手册 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
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前 个 
P R E F A C E 


为 了 适应 网 络 和 网 站 制作 技术 的 飞速 发 展 ， 网 页 必须 具有 广泛 的 扩展 性 ， 代 码 必须 简洁 适 
用 。 目 前 有 很 多 从 事 和 即将 从 事 网 页 制作 和 设计 的 人 员 ， 有 很 大 一 部 分 人 无 法 正确 理解 和 使 用 
HTML 语言 的 特点 ,而 只 能 通过 所 见 即 所 得 的 可 视 化 开发 工具 制作 网 页 。 虽然 可 视 化 开发 工具 
可 以 更 加 方便 快捷 地 制作 出 页 面 ， 但 是 由 于 其 本 身 的 局 限 性 ， 会 导致 代码 的 元 余 等 问题 。 了 解 
HTML 和 CSS 语言 并 结合 相应 的 可 视 化 开发 工具 ， 可 以 让 代码 的 编写 更 加 事半功倍 。 本 书 详 
细 讲 解 了 各 种 HTML 语言 及 CSS 属性 的 使 用 和 布局 的 技巧 ， 以 及 需要 注意 的 问题 等 ， 能 够 较 
好 地 满足 广大 网 页 制作 人 员 实 际 工作 的 需要 。 

本 书 作 者 根据 自己 多 年 的 使 用 经 验 ， 将 所 有 的 HIML 和 CSS 知识 进行 了 筛选 和 整理 ， 目 
的 是 让 读者 能 够 快速 、 全 面 、 完 整地 掌握 网 页 制作 方法 和 技巧 ， 系 统 掌握 HIML 和 CSS 的 各 
种 基本 知识 ， 并 避免 在 部 分 不 常用 的 代码 上 花费 时 间 。 本 书 讲解 的 HTML 和 CSS 知识 非常 实 
用 ， 是 广大 网 页 制作 人 员 提 高 制作 水 平 、 完 善 知识 结构 、 顺 应 网 络 技术 发 展 的 参考 书 。 


本 书 的 内 容 优势 


本 书 第 一 部 分 详细 讲解 了 HTML 语言 中 各 个 元 素 的 特点 和 各 种 属性 的 使 用 技巧 ， 第 二 部 
分 讲解 了 CSS 的 各 种 属性 的 作用 ， 以 及 使 用 CSS 美化 网 页 的 知识 。 最 后 一 部 分 是 实战 中 的 应 
用 技巧 。 在 讲解 每 个 知识 点 时 ， 都 结合 实际 制作 的 需要 ， 使 用 简单 的 实例 进行 了 演示 。 同 时 对 
实际 应 用 中 通常 会 发 生 的 错误 进行 了 分 类 讲解 ， 便 于 读者 系统 全 面 地 掌握 各 种 技巧 。 
本 书 的 特点 主要 体现 在 以 下 几 个 方面 。 
口 知识 全 面 ， 内容 充实 。 书 中 详细 讲解 了 HTML 语言 中 的 所 有 元 素 和 相应 的 属性 ， 以 及 
每 个 属性 取 值 的 知识 。 并 将 CSS 中 所 有 被 浏览 器 支持 的 属性 , 按照 应 用 分 为 几 个 大 类 。 
对 每 个 分 类 中 的 各 个 属性 都 从 作用 、 语 法 、 使 用 方法 、 注 意 问 题 等 几 个 方面 进行 了 详 
细 讲 解 。 
口 遵循 标准 , 注重 规范 。 书 中 所 有 的 代码 和 实例 等 内 容 , 都 遵循 W3C 发 布 的 Web 标准 。 
不 论 CSS 部 分 还 是 XHTML 部 分 , 代码 的 书写 和 属性 的 定义 , 都 严格 遵守 相应 的 规范 ， 
为 读者 的 学 习 提供 了 很 好 的 范本 。 
口 条 理 清楚 ， 注 重 应 用 。 书 中 对 HTML 以 及 CSS 的 相关 知识 进行 了 筛选 ， 据 弃 了 部 分 
不 实用 和 不 规范 的 属性 ， 让 读者 能 够 把 握 知 识 的 重点 ， 少 走 弯路 。 
口 叙述 简洁 , 通俗 易 懂 。 书 中 对 每 个 知识 点 的 讲解 都 非常 准确 精炼 ， 避 免 读 者 产生 歧义 。 


跟 我 学 HTML+CSS 


本 书 的 体例 编排 优势 


为 了 方便 读者 学 习 ， 本 书 在 写作 方法 上 进行 了 专门 的 琢磨 ， 主 要 包括 如 下 几 点 。 

口 实例 经 典 ， 举 一 反 三 。 书 中 对 各 个 元 素 和 属性 都 进行 了 实例 演示 ， 在 每 个 实例 中 都 演 
示 了 元 素 或 者 属性 的 典型 应 用 ， 便 于 读者 的 理解 。 

口 图 文 并 茂 ， 重 点 突出 。 书 中 每 个 实例 的 演示 效果 ， 都 用 图 片 的 方式 展示 出 来 ， 做 到 明 
确 直 观 。 

口 对 程序 代码 进行 编号 ， 方 便 读者 书 盘 结合 ， 能 轻易 找到 光盘 中 的 源 代码 ， 从 而 提高 学 
习 效 率 。 

口 每 章 最 后 配 有 习题 ， 让 读者 总 结 提高 ， 如 果 自 己 不 能 解答 的 话 ， 我 们 还 给 出 了 答案 ， 
以 加 强 学 习 。 

口 分 类 十 分 细致， 我 们 确保 每 个 知识 点 都 体现 在 目录 ， 读 者 根据 目录 ， 就 可 以 轻松 找到 
需要 的 内 容 。 


光盘 内 容 


(1) 全 书 所 有 实例 的 源 代 码 以 及 对 应 的 素材 文件 。 
(2) 15 小 时 视频 讲解 。 

(3) 赠送 485 页 PPT 文档 。 

(4) 赠送 930 页 电子 资料 。 


本 书 的 内 容 安排 


本 书 分 为 3 篇 , 共 20 章 , 从 HTML 使 用 的 基本 内 容 和 概念 讲 起 , 循序 渐进 地 讲解 了 HTML 
和 CSS 的 相关 知识 、 各 种 元 素 和 属性 的 使 用 方法 以 及 各 种 技巧 等 。 其 中 每 个 部 分 的 主要 内 容 如 
下 所 示 。 

第 一 篇 (第 1 章 ~ 第 10 章 )HTML 的 相关 概念 。 

详细 讲述 了 HTML 的 各 种 概念 和 相关 内 容 。 首 先 介 绍 了 HTML 的 基础 知识 ， 接 着 详细 讲 
解 了 HTML 的 页 面 基本 元 素 、 文 本 和 段落 元 素 、 列 表 元 素 、 图 像 元 素 、 表 格 元 素 、 超 链接 元 
素 、 表 单元 素 、 框 架 元 素 等 知识 。 

第 二 篇 (第 11 章 -第 19 章 )CSS 的 相关 概念 。 

首先 讲述 了 CSS 布局 中 的 各 种 概念 和 相关 内 容 。 其 中 包括 CSS 的 概念 、 结 构 和 表现 分 离 
的 原理 和 优点 、XHTML 的 基础 知识 、CSS 的 基本 语法 和 使 用 方式 等 。 接 着 讲述 了 CSS 盒 模型 
和 块 元 素 的 定位 。 包 括 CSS 中 盒 模 型 的 构成 ， 块 元 素 与 内 联 元 素 的 分 类 ， 以 及 使 用 各 种 属性 控 
制 块 元 素 的 位 置 和 显示 方式 等 。 最 后 讲述 了 CSS 控制 元 素 显示 效果 和 布局 页 面 的 方法 。 

第 三 篇 (第 20 章 ) 实 战 篇 。 

讲解 了 实际 开发 中 ， 使 用 HIML 和 CSS 代码 的 技巧 。 其 中 包括 实际 站 点 的 建立 、 站 点 结 
构 的 规划 、 页 面 实例 每 个 部 分 的 制作 过 程 等 几 个 内 容 。 通 过 本 章 的 学 习 ， 可 以 最 终 运 用 可 视 化 


的 开发 软件 ， 结 合 本 书 中 讲解 的 各 种 知识 ， 完 整地 掌握 页 面 制作 的 方法 。 


适合 阅读 本 书 的 读者 


口 


DOODODODO 


口 


专业 的 网 页 制作 人 员 。 

广大 的 网 页 设计 爱好 者 。 

网 页 程序 代码 编写 人 员 。 

专业 的 网 页 维护 人 员 。 

培训 机 构 、 高 等 院 校 及 职业 院 校 的 学 生 。 
从 事 网 页 代码 优化 的 工作 人 员 。 
拥有 个 人 站 点 的 站 长 。 


本 书 由 洛阳 理工 学 院 的 许 茂 伟 、 马 军 组 织 编写 ， 其 中 许 茂 伟 负责 编写 第 1 章 ~ 第 9 章 ， 马 
军 编写 第 10-20 章 ， 同 时 参与 资料 整理 的 有 付 京 君 、 刘 丹 、 张 丹 、 文 明 、 李 刚 、 李 里 、 杨 丽 、 


杨 全 德 、 


杨 明 、 武 勇 、 段 文 害 、 王 安平 、 王 文 龙 、 肖 运 香 、 董 方 、 郭 军 军 、 郭 瑞 、 陈 军 、 陈 洁 ， 


在 此 一 并 表示 感谢 。 


章 名 


第 1 章 HTML 的 基本 概念 


子 


重点 掌握 内 容 
1. 什么 是 HIML 
2. HTML 与 网 页 的 关系 
3. 用 什么 来 编写 和 开发 HIML 


Es 


第 2 章 HTML 的 语法 基础 


第 3 章 页 面 基本 元 素 


第 4 章 文本 和 段落 元 素 


第 5 章 列表 元 素 


1. HTML 页 面 结构 

. 元 素 和 属性 的 写法 
3. 文档 类 型 

1. 页 面 基础 元 素 

2. 页 面 头 部 元 素 

3. 页 面 头 部 相关 元 素 
4. 页 面 主体 元 素 

1. 层 元 素 
2. 标题 元 素 
3. 段落 元 素 
4 
5 


[3 


. 文本 的 间隔 和 布局 
5. 特殊 的 文本 元 素 
1. 无 序列 表 元 素 
2. 有 序列 表 元 素 
3. 列表 条 目 元 素 
4. 定义 列表 元 素 


1 学 时 


2 学 时 


2 学 时 


第 6 章 图 像 元 素 


1. 图 像 元 素 
2. 图 像 的 格式 


1 学 时 


第 7 章 表格 元 素 


1. 表格 元 素 的 结构 

2. <table> 元 素 的 属性 

3. <tr> 元 素 的 属性 

4. <td> 元 素 的 属性 

5. 表格 中 使 用 的 其 他 元 素 


第 8 章 链接 元 素 


- 链接 和 路 径 
链接 元 素 
图 像 链 接 


mb 
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VI 


章 名 


第 9 章 表单 元 素 


第 10 章 框架 元 素 


mw PP 上 


重点 掌握 内 容 


- 表单 元 素 

. 表单 控件 

. <input> 元 素 的 属性 
- 框架 集 元 素 

- 框架 内 容 元 素 

. 不 支持 框架 元 素 

- 内 联 框架 元 素 


( 续 表 ) 
教学 课时 


2 学 时 


2 学 时 


第 11 章 CSS 的 概念 


第 12 章 CSS 的 语法 


第 13 章 CSS 控制 文本 的 显示 


第 14 章 CSS 控制 列表 元 素 的 显示 


第 15 章 CSS 控制 表格 元 素 的 显示 


第 16 章 CSS 控制 元 素 的 大 小 


. 什么 是 CSS 
. CSS 与 网 页 显示 效果 的 关系 
. 使 用 CSS 的 方法 


选择 符 
属性 
值 


. 块 元 素 和 内 联 元 素 
. 应 用 样式 的 优先 级 
- 控制 字体 的 显示 

. 控制 文本 的 显示 

- 控制 列表 元 素 的 显示 
. 列表 元 素 的 使 用 和 顽 套 
- 控制 表格 元 素 的 显示 
. 单元 格 的 制约 关系 
- 盒 模型 的 概念 

. 元 素 内 容 的 大 小 

. 元 素 的 背景 


元 素 的 补 白 


- 元 素 的 边框 


元 素 的 边界 


- 嵌 套 元 素 的 大 小 和 距离 


1 学 时 


1 学 时 


2 学 时 


4 学 时 


第 17 章 CSS 控制 元 素 的 定位 


- 元 素 的 定位 
- 绝对 定位 


相对 定位 


- 定位 元 素 的 重 短 


3 学 时 


第 18 章 CSS 控制 元 素 的 布局 


第 19 章 CSS 控制 其 他 元 素 的 显示 


第 20 章 制作 个 人 博客 页 面 


- 元 素 的 浮动 

. 浮动 的 清除 

- 内 容 的 剪 切 

. 游 出 内 容 的 控制 
. 元 素 的 显示 方式 
. 元 素 的 可 视 性 

. 控制 滚 条 的 显示 
. 控制 光标 的 显示 
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Capter 
HTML 的 基本 枢 念 


随 着 网 络 的 不 断 普 及 ,网 页 已 经 被 大 多 数 人 所 熟悉 。 大 家 每 天 浏览 的 各 大 站 点 都 是 由 一 页 
一 页 的 网 页 构成 的 。 但 是 这 些 页 面 是 怎样 搭建 起 来 的 呢 ? 又 是 怎样 显示 的 呢 ? 其 实 网 页 是 由 一 
种 简单 的 标记 语言 HTML 构成 的 。 本 章 将 讲解 HTML 的 基本 概念 ， 以 及 开发 HIML 所 使 用 的 
软件 的 相关 知识 。 


全、 本章 主要 内 容 有 : 


@ HIML 的 概念 。 
HTML 和 网 页 的 关系 。 
HTML 的 编译 环境 。 
HTML 的 示例 。 
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了 .7 了 | 什么 是 HTML 


HTML 的 英文 全 称 是 Hyper Text Markup Language， 直 译 为 超 文本 标记 语言 ， 它 是 全 球 广 
域 网 上 描述 网 页 内 容 和 外 观 的 标准 。 大 家 在 浏览 网 页 时 可 能 注意 到 很 多 页 面 的 后 缀 名 为 html， 
事实 上 ，HTML 是 一 种 因特网 上 较 常 见 的 网 页 制作 标注 性 语言 ， 它 并 不 能 算 做 一 种 程序 语言 ， 
因为 它 缺少 语言 所 应 有 的 特征 。HTML 通过 正 等 浏览 器 的 翻译 ， 将 网 页 中 所 要 呈现 的 内 容 展 
现在 用 户 眼前 。 如 何 查看 HTML 代码 呢 ? 以 大 家 最 常用 的 正 浏览 器 为 例 ， 基 本 的 操作 步骤 如 
下 所 示 。 

(1) 双击 正 浏 览 器 图 标 ， 打 开 正 浏览 器 。 

(2) 在 地 址 栏 输入 需要 打开 的 网 址 ， 按 Enter 键 打开 相应 的 页 面 ， 如 图 1-1 所 示 。 

(3) 在 浏览 器 中 执行 “查看 ”|“ 源 文件 ”命令 ， 打 开源 文件 显示 窗口 ， 通 常 为 一 个 文本 文 


ee 


查看 收 评 天 工具 着 有 0) 各 sa 司 巴 ' 
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图 1-1 浏览 器 中 显示 的 网 页 图 1-2 页 面 的 HTML 代码 


从 图 1-1 和 图 1-2 可 以 看 出 ， 通 常 所 看 到 的 五 彩 缤纷 的 网 页 ， 其 实 都 是 由 一 系列 的 HIML 
代码 构建 起 来 的 ， 掌 握 了 如 何 编写 HIML 代码 ， 就 可 以 随心 所 欲 地 制作 网 页 了 。 


ee HTML 的 发 展 历史 


HTML 的 雏形 是 由 蒂 姆 。 本 尼斯 李 创建 的 , 用 来 解决 科学 家 们 共享 网 络 信息 的 问题 。 最 初 
的 HIML 语言 以 文本 格式 为 基础 ， 可 以 用 任何 编辑 器 和 文字 处 理 器 来 为 网 络 创建 或 转换 文本 ， 
仅 有 不 多 的 几 个 标签 。 网 络 从 此 迅猛 发 展 ， 人 人 都 开始 在 网 上 发 布 信息 。 很 快 人 们 就 开始 琢磨 
在 网 上 放置 图 像 和 图 标 。 


HTML 的 基本 概念 


1993 年 ，NCSA 推出 了 Mosaic， 也 就 是 第 一 个 图 文 浏览 器 ， 从 此 Web 开始 迅速 地 发 展 起 
来 。 HIML 语言 也 不 断 产生 新 型 、 功 能 强大 且 生 动 有 趣 的 标签 形式 , 如 <background>、<frame>、 
<fon> 和 <blink> 等 。 

但 是 此 时 ， 出 现 了 许多 不 同 的 HTML 版 本 ， 而 只 有 设计 者 和 用 户 共 有 的 HTML 部 分 才 可 
以 正确 显示 。 因 此 在 这 段 时 间 ，W3C 都 在 激烈 争论 名 叫 HIML 3 的 新 技术 ， 该 文件 概括 了 所 
有 全 新 的 特性 但 没有 任何 技术 支持 。 出 于 这 种 混乱 局 面 的 考虑 ， 在 1996 年 W3C 的 HIML 
Working Group 组 织 编写 了 新 的 规范 ， 从 此 HTML 3.2 开始 发 展 ， 它 更 接近 于 现实 的 目标 ， 即 
提供 给 内 容 商 和 浏览 器 发 展商 在 研究 工作 中 一 个 公允 的 参考 标准 。 

到 现在 为 止 ， HTML 已 经 发 展 到 了 比较 成 熟 的 HIML 4.0 版 本 ， 在 这 个 版 本 下 的 语言 中 ， 
规范 更 加 统一 ， 浏 览 器 之 间 的 兼容 性 也 更 加 完好 。 

HTML 包含 了 一 对 打开 和 关闭 的 标记 , 在 当中 并 有 属性 和 值 。 标 记 描述 了 每 个 在 网 页 上 的 
组 件 ， 如 文本 段落 、 表 格 或 图 像 。 在 本 书 中 ， 主 要 讲解 HTML 语言 各 种 属性 和 应 用 。 


一 个 简单 的 HTML 示例 


一 个 完整 的 HIML 文件 包括 标题 、 段 落 、 列 表 、 表 格 以 及 各 种 嵌入 对 象 ， 这 些 对 象 统称 
为 HIML 元 素 ， 在 HTML 中 使 用 标签 来 分 割 并 描述 这 些 元 素 。 实 际 上 可 以 说 ，HTML 文件 就 
是 由 各 种 HTML 元 素 和 标签 组 成 的 。 


一 个 HTML 文件 的 基本 结构 如 下 : 

<html> 文件 开始 标记 
<head> 文件 头 开始 的 标记 
e000e0 文件 头 的 内 容 
</head> 文件 头 结束 的 标记 
<body> 文件 主体 开始 的 标记 
ee 文件 主体 的 内 容 
</body> 文件 主体 结束 的 标记 
</html> 文件 结束 标记 


从 上 面 的 代码 结构 可 以 看 出 ,在 HTML 文件 中 , 所 有 的 标记 都 是 相对 应 的 , 开头 标记 为 < >， 
结束 标记 为 </ >， 在 这 两 个 标记 中 间 可 添加 属性 、 数 值 、 媒 套 结 构 等 各 种 类 型 的 内 容 。 
下 面 是 一 个 简单 的 HIML 示例 的 代码 ， 如 下 所 示 。 


例 程 1-1 莉 2u 


01 <!IDOCTYPE HIML PUBLIC"-//W3C//DTD HIML 4.01 Transitional//EN" 
02 "http://www.w3.org/TR/html4/loose.dtd"> 

03 <htm> 

04 <head> 
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05 <meta http-equiv="Content-Type" content="text/html: 
charset=gb2312"> 

06 ”<title> 无 标题 文档 </title> 

07 </head> 

08 <body> 

这 是 一 个 HTML 的 展示 示例 


在 Dreamweaver 中 运行 这 段 代码 ， 就 能 看 到 常见 的 网 
页 格式 的 显示 页 面 了 。 效 果 如 图 1-3 所 示 。 

从 图 1-3 可 以 看 到 <title></title> 之 间 的 内 容 显 示 为 页 面 ”到 
的 名 称 , 而 <body></body> 之 间 的 部 分 会 展示 在 页 面 内 容 中 。 图 1-3 一 个 简单 的 html 示例 


I 


3 HTML 与 网 页 的 关系 


平时 所 浏览 的 HIML 网 页 中 含有 文本 段落 、 表 格 和 图 像 等 。 下 面 是 一 个 含有 文本 和 图 片 
的 HTML 示例， 包括 了 HIML 文档 中 必须 使 用 的 部 分 元 素 。 其 具体 代码 如 下 所 示 。 


Wb html.html 


01 <!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 

02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

06 <title> 有 图 像 的 HIML 页 面 </title> 

07 </head> 

08 < > 

09 ”<h3> 西 湖 十 景 之 雷 峰 塔 </h3> 

雷 峰 塔 简介 <br> 雷 峰 塔 是 杭州 西湖 的 著名 景点 之 一 ， 我 们 熟悉 的 《白蛇 传 》 中 的 故事 就 发 生 在 这 里 ， 

据说 白 娘子 就 是 被 压 在 这 下 面 的 ， 这 里 也 是 著名 的 西湖 十 景 之 一 雷 峰 夕照 。<br> 

10 <center> 

11 <img src=" picjpg"> 

12 </center> 


13 </body> 

14 </html> 
其 代码 运行 后 的 显示 效果 ， 如 图 1-4 所 示 。 Hep ee 
对 照 代码 和 网 页 可 以 发 现 ，HTML 的 代码 并 不 直接 显示 | 
在 网 页 上 ， 而 是 通过 某 种 对 应 的 关系 以 网 页 的 形式 显示 出 来 。 
HTML 代码 的 作用 就 是 建立 起 网 页 内 容 与 最 终 效果 之 间 的 关 
系 , 并 通过 对 这 些 关系 的 调整 达到 构建 和 美化 内 容 的 目的 。 平 
时 所 看 到 的 网 页 当然 还 要 比 这 个 复杂 得 多 , 在 以 后 的 学 习 中 不 
断 总 结 ， 就 能 做 出 精美 的 网 页 了 。 Lm 
图 1-4 简单 的 XHTML 示例 


了 
桓 赔 十 之 震 由 塔 


HTML 的 基本 概念 


ts 用 什么 来 编写 和 开发 HTML 


Dreamweaver 是 最 常见 的 编写 HIML 的 工具 , 使 用 这 个 工具 可 以 随心 所 欲 地 编写 代码 、 设 
计 网 站 网 页 以 及 进行 高 级 开发 。 无 论 是 喜欢 手写 HIML 代码 还 是 习惯 于 可 视 化 环境 ， 
Dreamweaver 都 能 提供 方便 快捷 、 功 能 强大 的 工具 。 在 易 用 、 创 新 、 规 范 等 优点 的 基础 上 ， 
Dreamweaver 还 拥有 更 先进 的 网 页 布局 和 设计 环境 以 及 更 为 强大 的 代码 编辑 功能 等 卓越 特性 。 

Dreamweaver 的 操作 界面 主要 由 以 下 几 个 部 分 组 成 :标题 栏 、 菜 单 栏 、 插 入 栏 、 文 档 工具 
栏 、 文 档 窗口 、 属 性 窗口 及 多 个 浮动 面板 组 成 ， 如 图 1-5 所 示 。 


人 
让 -常用 面板 


1-5 ”Dreamweaver 的 界面 布局 


下 面 来 看 看 Dreamweaver 中 各 个 部 分 的 具体 功能 。 


1.5.1 标题 栏 


标题 栏 主要 包括 Dreamweaver 标记 、 应 用 程序 的 名 称 、 当 前 正在 编辑 文档 的 标题 和 名 称 等 
信息 ， 还 包括 最 小 化 按钮 、 最 大 化 按钮 以 及 关闭 按钮 。 

单 击 Dreamweaver 标记 国 可 以 打开 系统 菜单 。 在 Dreamweaver 标记 后 面 显示 程序 名 称 ， 
之 后 的 中 括号 “[]” 内 是 当前 打开 的 文档 的 标题 ， 小 括号 “( )” 内 是 该 文件 的 名 称 。 每 次 新 建 
一 个 文档 , Dreamweaver 都 会 自动 将 文档 标题 命名 为 “无 标题 文档 ”, 文件 名 定义 为 Untitled-x。 
其 中 , 文档 的 标题 和 文档 的 文件 名 称 是 不 同 的 概念 。 文件 的 标题 通常 在 文档 中 的 <tile> 和 </title> 
标记 中 ， 是 在 用 浏览 器 打开 文档 时 显示 在 浏览 器 窗口 的 标题 栏 上 的 名 称 ， 而 文件 的 名 称 则 是 文 
档 存储 在 磁盘 上 的 文件 名 。 


1.5.2 插入 栏 


对 于 一 些 经 常 使 用 的 操作 ,如 从 菜单 项 中 选择 还 是 很 不 方便 。 插入 栏 是 Dreamweaver 提供 
的 一 些 菜单 命令 的 快捷 方法 ， 其 按钮 一 般 都 和 菜单 中 的 命令 相对 应 ， 运 用 插入 栏 可 以 更 方便 快 


捷 。 插 入 栏 集成 了 多 种 网 页 元 素 ， 包 括 图 像 、 文 字 等 ， 默 认 的 插入 栏 中 的 各 种 选项 是 隐藏 起 来 
的 ， 如 图 1-6 所 示 。 
一 | 
图 1-6 插入 栏 


单 击 插入 栏 左边 的 向 下 箭头 这， 可 以 选择 不 同 的 工具 组 ， 包 括 布局 、 表 单 、 文 本 等 ， 如 图 
1-7 所 示 。 如 果 选 中 “显示 为 制 表 符 ”选项 则 以 传统 的 方式 显示 插入 栏 ， 如 图 1-8 所 示 。 
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图 1-7 工具 组 菜单 图 1-8 传统 方式 的 插入 栏 


“收藏 夹 ” 是 用 户 自 定义 的 组 ， 在 这 里 用 户 可 以 创建 自己 常用 的 按钮 。 


1.5.3 文档 工具 栏 


“文档 ”工具 栏 包含 按 钮 和 弹出 式 菜单 ， 它 们 提供 各 种 “文档 ”窗口 视图 (如 “设计 ” 视 
图 和 “代码 ”视图 )、 dst ha hla a 如 图 1-9 所 示 。 


1-9 文档 工具 栏 


要 显示 文档 工具 栏 ， 可 以 单 击 “ 查 看 ”|“ 工 具 栏 ”|“ 文 档 ” 菜 单 命令 。 文 档 工具 栏 中 各 
个 图 标 按钮 的 功能 分 别 如 下 所 示 。 
> [Sj “显示 代码 视图 ”: 显示 代码 窗口 。 
> [可 “显示 代码 和 设计 视图 ”: 显示 代码 和 设计 窗口 。 
> 男 | 显示 设计 窗口 。 
i “标题 ”: 用 来 设置 或 修改 文档 的 标题 。 
> 可 “文件 管理 ”: 单 击 该 按钮 ， 通 过 这 里 来 实现 消除 只 读 属 性 、 获 取 、 取 出 、 上 传 、 
存 回 、 撤 销 取出 、 设 计 注意 以 及 站 点 定位 等 功能 。 
> “在 浏览 器 中 预览 /调试 ”: 单 击 该 按钮 在 定义 好 的 浏览 器 中 预览 或 调试 ， 或 是 编 
辑 浏览 器 列表 。 


1.5.4 “实例 练习 


在 Dreamweaver 中 直接 书写 HIML 的 代码 ， 通 过 一 个 HIML 小 实例 进行 说 明 。 
第 一 步 : 编写 HIML 代码。 


HTML 的 基本 概念 


(1) 启动 Dreamweaver 程序 ， 就 会 看 到 Dreamweaver 的 工作 界面 ， 如 图 1-10 所 示 。 
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1-10 ， Dreamweaver 的 工作 界面 


(2) 选择 “文件 ”| “新建 ” 命 令 ， 在 打开 的 对 
话 框 中 选择 HIML 选项 , 或 者 直接 单 击 界面 新 建 栏 
目下 的 HIML 选项 ， 都 可 以 以 代码 视图 的 形式 打开 
一 个 新 的 HTML 文件 ， 如 图 1-11 所 示 。 

(3) 在 代码 中 <title> 与 </title> 标 签 之 间 的 内 容 
就 是 新 建 HIML 文件 的 标题 , 也 就 是 将 要 在 浏览 器 
的 标题 栏 中 显示 的 页 面 标题 ， 这 里 将 其 更 改 为 “这 
是 一 个 网 页 ”。 

(4) 在 <body> 与 <body> 标 签 之 间 添 加 主体 内 
容 的 代码 ， 如 下 : 

<br> 欢 迎 学 习 HTML 语言 ! </br> 

<br> 我 们 愿 做 您 最 忠实 的 良师益友 ! </br> 

<br> 让 我 们 伴 您 一 起 走 入 HTML 的 世界 吧 ! ! </br> 

这 样 一 个 最 基本 的 HTML 文件 就 编写 完成 了 。 

第 二 步 : 保存 并 查看 HTML 文件 。 

(1) 选择 “文件 ”|“ 保 存 ” 菜 单 命令 ， 打 开 如 图 1-12 所 示 的 “另存 为 ”对 话 框 。 

(2) 在 “保存 在 ”后 面 的 下 拉 列 表 中 选择 存盘 的 位 置 ， 在 “文件 名 ”后 面 的 文本 框 中 输入 
文件 的 名 称 ， 设 置 文件 的 保存 类 型 为 “HTML 文档 ”， 单 击 “ 保 存 ” 按 钮 完成 文件 的 保存 。 

(3) 双击 保存 的 文件 ， 可 以 在 浏览 器 中 看 到 文件 的 效果 ， 如 图 1-13 所 示 。 
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图 1-11 Dreamweaver 的 代码 视图 


我 们 愿 向 您 最 放 实 的 良师益友 | 
让 我 们 阐 您 一 起 走 入 ETMI 的 世界 FE 


FTPT 广 刘 weeww 
图 1-12 “另存 为 ”对 话 框 图 1-13 保存 好 后 的 显示 效果 


4.6, 本 章 习 题 


1. HTML 编写 的 页 面 要 在 什么 环境 下 才能 显示 ? 
2. 使 用 Dreamweaver 软件 制作 内 容 为 “进入 HTML 的 世界 ”， 文 档 名 称 为 “index”， 标 
题 为 “HTML 练习 ”的 页 面 。 


HTML 的 芷 法 基础 


本 章 主 要 讲解 关于 HTML 的 基础 知识 。 内 容 包括 HTML 页 面 结构 、 元 素 的 书写 格式 和 属 
性 、HTML 代码 规范 、 选 择 文档 类 型 、 定 义 名 字 空 间 等 几 个 内 容 。 


六、 本 人 主要 内 容 有 : 


@ 重点 掌握 HIML 页 面 结构 、HIML 代码 规范 和 文档 类 型 选择 的 相关 知识 。 
@ ” 养 成 良好 的 程序 书写 习惯 。 
@ 名 字 空 间 的 含义 。 


跟 我 学 HTML+CSS 


2.7 了 | HTML 页 面 结构 


| 
首先 看 一 个 最 简单 的 HTML 页 面 实 例 。 其 代码 如 下 所 示 。 


Wb xhiml- example.html 


01 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
05 <title> HTML 页 面 结构 </title> 
</head> 


<body> 

这 里 是 页 面 的 主体 

08 </body> 

09 </html> 

在 这 段 代 码 中 ， 包 含 了 一 个 HIML 页 面 必需 的 页 面 结构 部 分 。 其 具体 结构 如 下 所 示 。 
首先 是 文档 类 型 声明 部 分 ， 由 <!DOCTYPE> 元 素 定 义 。 其 对 应 的 页 面 代码 如 下 所 示 。 


<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-transitional.dtd"> 
<html> 元 素 是 XHTML 文档 中 必须 使 用 的 元 素 ， 所 有 的 文档 内 容 (包括 文档 头 部 内 容 和 文 
档 主体 内 容 ) 都 要 包含 在 <html> 元 素 之 中 。<html> 元 素 的 语法 结构 如 下 所 示 。 


孙 说 明 
<html> 和 结束 标签 </html> 一 起 构成 一 个 完整 的 <htm 上 元素。 其 包含 的 内 容 要 写 在 
起 始 和 结束 标签 之 间 。 
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名 字 空 间 是 <html> 元 素 的 一 个 属性 ， 写 在 <html> 元 素 起 始 标签 里 面 。 其 在 页 面 中 的 相应 代 
码 如 下 所 示 。 


<html xmilns="http://www.w3.org/1999/xhtml"> 


名 字 空 间 属 性 用 xmins 来 表示 ， 用 来 定义 识别 页 面 标签 的 网 址 (关于 名 字 空 间 的 详细 内 容 ， 
请 参看 2.4 节 )。 

网 页 头 部 元 素 <head>, 也 是 XHTML 文档 中 必须 使 用 的 元 素 。 其 作用 是 定义 页 面 头 部 的 信 
息 ， 其 中 可 以 包含 标题 元 素 、<meta> 元 素 等 。<head> 元 素 的 语法 结构 如 下 所 示 。 
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“<head> 元 素 所 包含 的 内 容 ， 不 会 显示 在 浏览 器 的 窗口 中 。 但 是 部 分 内 容 会 显示 在 
浏览 器 的 其 他 位 置 (关于 页 面 头 部 所 使 用 的 元 素 ， 请 参看 第 3 章 )。 


页 面 标题 元 素 <title> 用 来 定义 页 面 的 标题 。 其 语法 结构 如 下 所 示 。 


页 面 标题 中 包含 的 文本 , 在 页 面 发 布 时 , 会 显示 在 浏览 器 的 标题 栏 中 (关于 页 面 标 
题 的 详细 内 容 ， 请 参看 第 3 章 ). 


页 面 主体 元 素 <body> 用 来 定义 页 面 所 要 显示 的 内 容 。 页 面 的 信息 主要 通过 页 面 主体 来 传 
递 。 在 <body> 元 素 中 ， 可 以 包含 所 有 页 面 元 素 。<body> 元 素 的 语法 结构 如 下 所 示 。 


定义 了 以 上 几 个 元 素 后 , 便 构成 了 一 个 完整 的 HIML 页 面 .而 且 以 上 所 有 元 素 ,都 是 HTML 
页 面 所 必须 具有 的 基本 元 素 。 此 时 页 面 在 正 浏览 器 中 的 显示 效果 ， 如 图 2-1 所 示 。 


| 

人 在 本 书 中 ， 如 没有 特意 说 明 ， 代 码 运 
行 后 的 显示 效果 , 均 为 在 全 浏览 器 中 的 显 
示 效 果 ( 版 本 为 6.0)。 


一 个 完整 的 HTML 页 面 , 必须 包含 以 上 几 个 元 素 。 
关于 页 面 结构 中 包含 的 其 他 元 素 和 属性 , 将 在 以 后 的 章 
节 中 详细 介绍 。 


人 


2.2, 元 素 和 属性 的 写法 


元 素 和 属性 是 HTML 的 构成 基础 ， 每 个 元 素 在 HTML 页 面 中 构成 了 不 同 的 部 分 ， 可 以 将 
整个 页 面 划 分 成 不 同 的 结构 。 而 每 个 元 素 中 的 属性 可 以 用 来 定义 元 素 的 显示 效果 ， 也 可 以 用 来 
标记 元 素 ， 便 于 元 素 与 其 他 的 内 容 关联 。 熟 悉 各 种 HIML 元 素 及 其 属性 的 功能 是 制作 HTML 
页 面 的 必 备 知识 。 


2.2.1 ”元素 的 书写 格式 


在 确定 了 页 面 结构 之 后 ,就 可 以 在 结构 中 添加 其 他 的 页 面 元 素 了 。 其 他 页 面 元 素 从 表现 形 
式 上 看 ， 可 以 分 为 两 类 : 可 以 包含 内 容 的 元 素 、 自 封闭 的 元 素 。 下 面 分 别 介绍 这 两 种 元 素 。 

1. 可 以 包含 内 容 的 元 素 

可 以 包含 内 容 的 元 素 ， 其 表现 形式 如 下 所 示 。 

< 元 素 名 称 >……</ 元 素 名 称 > 


p 可 以 包含 内 容 的 元 素 ， 其 完整 的 结构 由 两 部 分 组 成 ， 即 元 素 的 起 始 标签 < 元 素 名 
称 > 和 元 素 的 结束 标签 </ 元 素 名 称 >. 


2. 自封 闭 的 元 素 
自封 闭 的 元 素 ， 是 指 起 始 和 结束 使 用 同一 个 标签 的 元 素 。 其 表现 形式 如 下 所 示 。 
< 元 素 名 称 放 
Blu 
-7 在 自封 闭 的 元 素 中 ， 采 用 “元 素 名 称 * 之 后 添加 英文 “空格 。 和 和 “1 的 格式 来 结 
束 元 素 。 所 以 元 素 中 不 能 包含 内 容 . 


2.2.2 元 素 属性 的 书写 格式 


属性 是 包含 在 元 素 之 中 ， 用 来 定义 元 素 各 种 显示 效果 和 触发 相应 行为 的 部 分 。 其 语法 结构 
如 下 所 示 。 
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< 元 素 名 称 属性 -" 属 性 值 ">……</ 元 素 名 称 > 


让 
a 


和 人 属性 必须 添加 在 元 素 的 起 始 标签 之 中 ， 用 “空格 ”来 分 审 属性 与 元 素 名 称 。 属 性 
值 必须 包含 在 英文 的 “引号 ”之 中 。 可 以 为 一 个 元 素 定义 几 个 属性 ， 其 中 每 个 属性 之 
间 用 “ 室 格 ”进行 分 隔 . 


属性 的 作用 是 用 来 设置 元 素 的 外 观 和 行为 。 下 面 是 一 个 在 元 素 中 使 用 属性 的 实例 ， 其 代码 
如 下 所 示 。 


01 <!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional/EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 ”<title> 赤 壁 怀古 </title> 

06 </head> 

07 <body bgcolor="#00FFCC"> 

大 江东 去 浪 淘 尽 ,千古 风流 人 物 。 


| 代码 中 ， 在 <body> 元 素 中 添加 了 bgcolor 属性 ， 其 属性 值 为 #00FFCC。#00FFCC 


显示 效果 为 浅 绿色 。bgcolor 属性 的 含义 是 背景 颜色 . 


使 用 bgcolor 属性 后 ， 页 面 的 显示 效果 如 图 2-2 所 示 。 作 为 参照 ， 取 消 bgcolor 属性 后 ， 页 
面 的 显示 效果 如 图 2-3 所 示 。 
天 | aternet Erplorer NT: 
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大 江东 去 浪 淘 尽 ,千古 风流 人 物 。 四 


| [vom 属 LE 2 
图 2-2 定义 bgcolor 属性 后 页 面 的 显示 效果 2-3 取消 bgcolor 属性 后 页 面 的 显示 效果 


对 比 图 2-2 和 图 2-3 可 以 看 出 ， 通 过 定义 属性 ， 可 以 更 改元 素 默认 的 表现 形式 。 一 般 每 个 
元 素 都 含有 多 个 不 同 的 属性 。 按 照 属性 的 作用 ， 可 以 大 致 将 属性 分 为 以 下 几 类 。 


跟 我 学 HTML+CSS 


> 表现 属性 用 来 控制 元 素 表 现 效果 ， 如 元 素 的 高 度 、 宽 度 、 边 框 、 文 本 排列 方式 、 语 言 
等 属性 。 

> 事件 属性 用 来 添加 行为 , 一般 要 结合 JavaScript 等 脚本 或 者 程序 来 实现 , 如 onMouseOver 
属性 、onLoad 属性 等 。 

> 标记 属性 用 来 标记 某 个 元 素 ， 如 id 属性 、name 属性 等 。 

> 级 联 样式 属性 是 指使 用 级 联 样式 表 ， 如 style 属性 、class 属性 等 。 

> 其 他 属性 指 以 上 几 类 属性 以 外 的 属性 ， 如 type 属性 、value 属性 等 。 

关于 元 素 属性 的 详细 内 容 ， 将 在 讲解 每 个 元 素 使 用 方法 时 具体 介绍 。 


2.2.3 HTML 的 语法 规范 

了 解 上 面 的 内 容 后 ， 用 户 在 使 用 HIML 语言 进行 网 页 制作 时 ， 必 须要 遵循 一 定 的 语法 规 
范 。 下 面 进 行 详细 讲解 ， 其 中 具体 内 容 可 以 分 为 以 下 几 点 。 

1. 区 分 大 小 写 

XHTML 对 大 小 写 是 敏感 的 ， 在 XHTML 文档 中 ， 使 用 相同 字母 大 写 和 小 写 定义 的 元 素 是 
不 同 的 。 例 如 ，<h> 和 <H> 表 示 的 是 不 同 的 元 素 。 
孙 说 明 
| 在 HIML 中 ， 规 定 要 使 用 小 写字 母 来 定义 页 面 中 所 有 的 元 素 和 属性 。 包 括 加 


样式 表 中 的 属性 等 也 要 使 用 小 写字 母 . 


2. 正确 酝 套 所 有 元 素 
HTML 中 ， 当 元 素 进行 颈 套 时 ， 必 须 按照 打开 元 素 的 顺序 进行 关闭 。 正 确 峰 套 元 素 的 代码 
示例 如 下 。 

<ul><1><Ai><u> 

错误 的 藤 套 元 素 的 代码 示例 如 下 所 示 : 

<u><li><></i> 

HTML 中 还 有 一 些 严格 强制 执行 的 嵌 套 限制 。 这 些 限 制 包括 以 下 几 点 。 

> <a> 元 素 中 不 能 包含 其 他 的 <a> 元 素 。 

> <pre> 元 素 中 不 能 包含 <object>、<big>、<img>、<small>、<sub> 或 <sup> 元 素 。 

> <botton> 元 素 中 不 能 包含 <input>、<textarea>、<label>、<select>、<botton>、<form>、 
<iframe>、<fieldse 信 或 <isindex> 元 素 。 

> <label> 元 素 中 不 能 包含 其 他 的 <label> 元 素 。 

> <fom> 元 素 中 不 能 包含 其 他 的 <formm> 元 素 。 


HTML 的 语法 基础 


3. 元 素 必须 要 封闭 


在 HIML 中 ， 所 有 的 页 面 元 素 都 要 有 相应 的 结束 元 素 。 例 如 ，<body> 对 应 的 结束 元 素 是 
</body>。 其 中 独立 的 元 素 ， 例 如 ，<br> 等 也 必须 要 结束 。 方 法 是 在 元 素 的 右 尖 括 号 前 加 入 一 
个 “/” 来 结束 元 素 ， 例 如 ，<br 人 > 就 是 <br> 结 束 后 的 写法 。 如 果 元 素 中 还 有 属性 ， 则 “/” 出 现 
在 所 有 属性 的 后 面 。 示 例 代 码 如 下 。 


<img src="picjpg" 广 
4. 属性 必须 加 上 双 引 号 

HTML 中 所 有 的 属性 ， 包 括 数字 值 都 必须 加 上 双 引 号 。 其 示例 代码 如 下 所 示 : 
<table width="400"> 

5. 明确 所 有 属性 的 值 


HTML 中 规定 每 一 个 属性 都 必须 有 一 个 值 。 没有 值 的 属性 也 必须 用 自己 的 名 称 作为 值 。 例 
如 , 在 HIML 中 , checked 属性 是 可 以 不 取 值 的 , 但 是 在 XHTML 中 必须 用 它 自身 名 称 作为 值 。 
示例 代码 如 下 所 示 : 

<input type="checkbox" name="box1" value="abc" checked="checked" /> 


6. 特殊 字符 要 用 编码 表示 


在 HIML 页 面 内 容 中 ， 所 有 的 特殊 字符 都 要 用 编码 表示 。 比 如 “&” 必 须要 用 “&amp:” 
的 形式 。 例 如 ， 下 面 的 HTML 代码 : 


<img src="picjpg" src="abc & def'> 
在 XHTML 中 必须 要 写成 : 


<img src="picjpg" src="abc &amp def /> 


7. 推荐 使 用 级 联 样式 表 控制 外 观 


在 HTML 中 ， 推 荐 使 用 级 联 样式 表 控制 外 观 。 实 现 页 面 的 结构 和 表现 相 分 离 ， 相 应 的 会 
有 部 分 外 观 属性 不 推荐 使 用 , 如 algin 属性 等 (关于 级 联 样式 表 和 属性 的 知识 , 将 在 4.1.4 节 详 细 
介绍 )。 


8. 使 用 页 面 注释 
HTML 中 使 用 <!-- 和 --> 作 为 页 面 注释 ， 其 示例 代码 如 下 所 示 : 
<!- 这 是 一 个 注释 -> 


跟 我 学 HTML+CSS 


| 记 说 明 
1 在 页 面 中 相应 的 位 置 使 用 注释 可 以 使 文档 结构 更 加 清晰 


9. 推荐 使 用 外 部 链接 来 调用 脚本 


HTML 中 使 用 在 <!-- 和 --> 注 释 中 插入 脚本 ， 但 是 在 XML 浏览 器 中 会 被 简单 地 删除 ， 导 致 
脚本 或 样式 的 失效 。 推 荐 使 用 外 部 链接 来 调用 脚本 。 调 用 脚本 的 代码 如 下 所 示 。 

<script language="JavaScript].2" type="text/javascript" src="scripts/menu.js"></scripf> 
。 记 说 明 
了 language 是 指 所 使 用 的 语言 的 版 本 。 type 是 指 所 使 用 脚本 语言 等 的 种 类 。src 是 指 
| 脚本 文件 所 在 路 径 (关于 脚本 的 详细 内 容 ， 将 在 3.8 节 详细 介绍 )。 


妃 . 了 | 文档 类 型 


文档 类 型 (DOCTYPE) 的 选择 ， 将 决定 页 面 中 可 以 使 用 哪些 元 素 和 属性 ， 同 时 将 决定 级 联 
样式 能 否 实现 。 下 面 详细 讲解 关于 DOCTYPE 的 定义 和 选择 问题 。 


2.3.1 什么 是 文档 类 型 


文档 类 型 ， 又 可 以 写 为 DOCTYPE( 是 Document Type 的 简写 )， 在 页 面 中 用 来 说 明 页 面 所 
使 用 的 XHTML 是 什么 版 本 .制作 XHTML 页 面 , 一 个 必 不 可 少 的 关键 组 成 部 分 就 是 DOCTYPE 
声明 。 只 有 确定 了 一 个 正确 的 DOCTYPE，XHTML 里 的 标识 和 级 联 样式 才能 正常 生效 。 


2.3.2 选择 什么 样 的 DOCTYPE 

在 HTML 1.0 中 有 3 种 DTD( 文 档 类 型 定义 ) 声 明 可 以 选择 : 过 渡 的 (TransitionaD)、 严 格 的 
(Strict) 和 框架 的 (Frameset)。 下 面 分 别 介绍 如 下 。 

1. 过 渡 的 

一 种 要 求 不 很 严格 的 DTD， 人 允许 在 页 面 中 使 用 HTML 4.01 的 标识 (符合 XHTML 语法 标 
准 )， 过 渡 的 DTD 的 写法 如 下 所 示 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 


HTML 的 语法 基础 


2. 严格 的 
一 种 要 求 严格 的 DTD， 不 允许 使 用 任何 表现 层 的 标识 和 属性 ， 如 <br 人 等 。 严 格 的 DTD 
的 写法 如 下 所 示 。 
<!IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 


3. 框架 的 
一 种 专门 针对 框架 页 面 所 使 用 的 DTD， 当 页 面 中 包含 有 框架 元 素 时 , 就 要 采用 这 种 DTD。 
框架 的 DID 的 写法 如 下 所 示 。 


<!IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> 


使 用 严格 的 DTD 来 制作 页 面 当 然 是 最 理想 的 方式 , 但 对 于 没有 深入 了 解 Web 标准 的 网 页 
设计 者 , 比较 合适 的 是 使 用 过 渡 的 DTD。 因为 这 种 DTD 还 允许 使 用 表现 层 的 标识 、 元 素 和 属性 。 


| 也 注意 
了 DOCTYPE 的 声明 一 定 要 放置 在 XHTML 文档 的 顶部 。 


\ 


在 2001 年 5 月 份 ，W3C 发 布 了 XHTML1.1 版 。 其 规范 和 1.0 版 中 的 严格 类 型 基本 相似 ， 
其 DTD 的 写法 如 下 所 示 。 


<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.M/EN" 
"http:/www.w3.ore/TR/xhtmlll/DTD/xhtmlll.dtd"> 


3 什么 是 名 字 空 间 


名 字 空 间 的 英文 是 Namespace， 含 义 就 是 通过 一 个 网 址 指向 来 识别 页 面 上 的 标签 。 在 
XHTML 中 使 用 的 是 “xmlns”， 也 就 是 XHTML Namespace 的 缩写 。 用 来 识别 XHTML 页 面 上 
的 标签 的 网 址 指向 是 http://www.w3.org/1999/xhtml。 关 于 名 字 空 间 定义 的 完整 写法 如 下 所 示 。 

<html xmilns="http://www.w3.org/1999/xhtml"> 

当 使 用 可 视 化 的 网 页 开发 工具 新 建文 档 时 ， 选 择 适 当 的 格式 的 文档 类 型 ，DOCTYPE 的 声 


明和 名 字 空 间 的 声明 都 会 自动 生成 。 到 目前 为 止 , XHTML 的 4 种 文档 类 型 的 名 字 空 间 都 是 
“http://www.w3.0org/1999/xhtml” 。 


2.5| 本 章 习 题 
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一 、 选 择 题 


1. 用 HTML 标记 语言 编写 一 个 简单 的 网 页 ， 网 页 最 基本 的 结构 是 ( )。 
A. <html> <head>...</head> <frame>...</frame> </html> 

B. <html> <title>...</tile> <body>...</body> </html> 

C. <html> <title>...</title> <frame>...</frame> </html> 

D. <html> <head>...</head> <body>...</body> </html> 

2. 关于 XHTML 的 语法 规范 下 面 表示 错误 的 是 ( )。 

A. XHTML 中 对 元 素 的 大 小 写 是 敏感 的 。 

B. XHTML 中 所 有 的 元 素 都 必须 封闭 。 

C. XHTML 中 所 有 元 素 的 属性 值 都 必须 用 双 引 号 。 

D. XHTML 中 某 些 元 素 的 属性 可 以 没有 取 值 。 

二 、 实 战 练习 

1. 使 用 Dreamweaver 编写 不 同文 档 类 型 的 页 面 。 

2. 从 网 上 复制 内 容 ， 并 在 Dreamweaver 中 查看 源 文件 的 写法 ， 熟 悉 HIML 的 语法 。 


页 面 基 本 元 素 


本 章 主要 讲解 HTML 页 面 基本 元 素 ， 这 些 元 素 是 构成 页 面 的 基础 ， 它 们 各 有 自己 相应 的 
作用 。 掌 握 这 些 页 面 的 基本 元 素 是 定义 HIML 页 面 的 关键 ， 这 些 设置 决定 了 页 面 的 文档 类 型 
和 显示 效果 ， 同 时 也 直接 影响 页 面 中 各 种 元 素 能 否 正 常 显示 。 本 章 的 知识 点 包括 <head> 元 素 、 
<title> 元 素 、<mate> 元 素 、<style> 元 素 和 <link> 元 素 等 。 


\ 


大、 本章 主要 内 容 有 : 


@ <head> 元 素 各 个 属性 的 作用 和 意义 。 
@ <style> 元 素 的 作用 和 写法 。 
@ <link> 元 素 中 各 个 属性 的 特点 和 用 法 。 


跟 我 学 HTML+CSS 


过 .了 | 页 面 基础 元 素 <html> 


<html> 是 页 面 的 基础 元 素 ， 它 通知 客户 端 该 文档 是 HIML 文档 ， 主 要 用 来 定义 页 面 的 开 
始 和 结束 部 分 ， 在 <html> 元 素 中 ， 包 含 页面 头 部 和 主体 部 分 。 语 法 结构 如 下 所 示 : 


<html> 整 个 页 面 内 容 </html> 


在 <html> 和 </html> 之 间 写 入 用 户 想 要 编辑 的 页 面 内容 就 构成 了 一 个 简单 的 页 面 , 下 面 看 一 
个 简单 的 示例 。( 在 Dreamweaver 中 新 建 html 即 可 )。 


wea html.html 
01 <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
06 ”<title> 无 标题 文档 </title> 
07 </head> 
08 <body> 
09 </body> 
10 </html> 


在 这 个 例 程 中 ,<html> 元 素 中 定义 了 xmlns 属性 ,用 来 定义 名 字 空 间 ( 关 于 名 字 空间 的 内 容 ， 
请 参照 2.4 节 )。 


一 般 来 说 <html> 元 素 中 可 以 使 用 的 所 有 属性 包括 定义 名 字 空 间 属性 xmlns、 文 本 显示 方向 
属性 dir 和 指定 语言 属性 lang。 在 后 面 会 逐一 进行 讲解 。 


3.1.1 文本 显示 方向 属性 dir 


浏览 网 页 时 ， 每 一 个 HTML 页 面 的 显示 都 是 字体 从 左 向 右 ， 浏 览 器 滚 条 的 位 置 在 右 方 的 
格式 ， 在 HIML 中 字体 的 位 置 可 以 由 文本 显示 方向 属性 dir 来 控制 。dir 属性 是 用 来 指定 浏览 
器 显示 文本 的 方向 ， 同 时 也 决定 浏览 器 滚 条 的 位 置 。 语 法 结构 如 下 所 示 : 

<html dir=" 浏 览 器 中 文本 的 方向 "> 包含 的 内 容 部 分 <html> 


dir 属性 可 以 取 两 个 值 ， 即 lt 和 世 ， 它 们 分 别 表示 浏览 器 中 文本 的 方向 从 左 向 右 显示 (Itr) 
和 浏览 器 中 文本 从 右 向 左 显示 (rl)。 下 面 是 一 个 使 用 dir 属性 的 实例 。 其 代码 如 下 所 示 。 


ba html-dir html 
01 <!IDOCTYPE html PUBLIC"-/W3C/DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 < html di 一"ltr" html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
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03 
一 


-Type" content="text/html:; charset=utf-8" /> 


<meta n 
06 ”<title> 简 单 问 候 </title> 
07 </head> 
08 <body> 
你 好 呀 
09 </body> 
10 <html> 


该 实例 的 03 行 中 dir 属性 中 使 用 了 ltr 值 ， 从 左 向 右 正 常 显示 。 其 运行 后 的 显示 效果 如 图 
3-1 所 示 。 


3-1 dir 属性 取 值 为 lt 时 的 显示 效果 


上 面 是 正常 模式 ， 和 通常 看 到 的 网 页 一 样 的 显示 。 再 看 下 面 的 例子 。 


ehtml-dir.html 

<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 大 家 好 </title> 

</head> 


01 
02 
03 
04 
05 
06 
07 
08 


<body> 
初次 见面 ， 请 多 多 指教 。 


该 实例 中 , 在 03 行 中 ，dir 属性 中 使 用 也 值 ， 从 
右 向 左 的 显示 。 其 运行 后 的 显示 效果 ， 如 图 3-2 所 示 。 

从 图 3-1 和 图 3-2 中 可 以 看 出 ，dir 属性 只 是 更 改 了 
文本 的 显示 方向 , 并 没有 改变 文本 自身 的 结构 。 如 图 3-1 
所 示 。 文 本 内 容 是 从 左 向 右 的 ， 但 是 标点 中 的 句号 却 显 
示 在 左 侧 。 同 时 滚 条 的 位 置 ， 从 右 侧 换 到 了 左 侧 。 
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跟 我 学 HTML+CSS 


3.1.2 ”指定 语言 属性 lang 


lang 属性 用 来 指定 文档 中 所 使 用 的 语言 。 浏 览 器 将 会 根据 指定 的 语言 ， 更 好 地 显示 页 面 。 


理 法 结构 如 下 所 示 : 
<html lang=" 指 定 的 语言 "> 包含 的 内 容 部 分 <html> 


lang 属性 的 取 值 可 以 使 用 ISO 标准 中 的 语言 代码 。 常 用 的 语言 代码 如 表 3-1 所 示 。 


表 3-1 常用 的 语言 代码 


英语 
汉语 
日 语 
法 语 
德语 
意大利 语 


写 法 


在 <html> 元 素 中 加 入 lang 属性 ， 使 浏览 器 更 好 地 显示 页 面 ， 并 不 会 更 改 页 面 的 文字 编码 。 


示例 如 下 。 
html-lang.html 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 


本 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 


03 <html lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 


04 <head> 
05 ”<title> 文 档 标题 </title> 
06 </head> 
07 <body> 
页 面 内 容 部 分 。 
08 </body> 
09 </html> 


在 03 行 中 定义 了 使 用 法 语 作为 文档 中 的 使 用 语 
行 结果 如 图 3-3 所 示 。 

徐 注意 

lang 属性 和 3.1.1 节 所 讲解 的 dir 属 

性 ， 也 可 以 作用 在 除 <html> 元 素 以 外 的 其 

他 元 素 上 ， 其 作用 范围 为 元 素 所 包含 的 内 
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二 吾 
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-回国 


页 面 内 雁 部 分 - 


Ea CT em 


图 3-3 页 面 的 文字 编码 没有 改变 


页 面 基 本 元 素 


过 .2 页面 头 部 元 素 <head> 


在 HTML 语言 的 头 元 素 中 ， 一 般 需 要 包括 标题 、 基 底 信息 、 元 信息 等 。HTML 的 头 部 元 
素 是 以 <head> 为 开始 标记 ， 以 </head> 为 结束 标记 的 。 一 般 情况 下 ， 定 义 在 HTML 语言 头 部 的 
内 容 往往 不 会 在 网 页 上 直接 显示 。 它 用 于 包含 当前 文档 的 相关 信息 ， 可 以 包含 <title> 元 素 、 
<meta> 元 素 等 ， 分 别 用 来 定义 页 面 的 标题 、 编 码 。 使 用 <head> 元 素 可 以 将 基本 信息 部 分 和 页 面 
主体 内 容 区 分 开 来 。 语 法 结构 如 下 所 示 : 

<head> 包 含 的 其 他 元 素 </head> 

下 面 是 一 个 使 用 <head> 元 素 的 实例 ， 其 代码 如 下 所 示 。 


wa head.html 
01 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<title> 文 档 标题 </title> 
07 </head> 
08 <body> 
09 </body> 
10 </html> 


该 实例 中 ， 在 04 到 07 的 <head> 元 素 中 包含 了 一 个 <meta> 元 素 、 一 个 <title> 元 素 ， 用 来 定 
义 页 面 的 文字 编码 和 标题 。 在 HTML 中 ， 人 允许 页 面 中 不 使 用 <head> 元 素 。<head> 元 素 中 可 以 
使 用 的 属性 也 是 文本 显示 方向 属性 dir 和 指定 语言 属性 lang。 


可 .了 | 页 面 标题 元 素 <title> 


HTML 页 面 的 标题 一 般 是 用 来 说 明 页 面 用 途 的 , 它 显示 在 浏览 器 的 标题 栏 中 。 每 个 HIML 
页 面 都 应 该 有 标题 ， 在 HTML 文档 中 ， 标 题 信息 设置 在 页 面 的 头 部 ， 也 就 是 <head> 与 <head> 
之 间 。 标 题 标记 以 <title> 开 始 ， 以 </title> 结 束 。 语 法 结构 如 下 所 示 : 


<title>*…</title> 
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! 

| 说 明 

“下 在 标记 中 间 的 “...” 就 是 标题 的 内 容 ， 它 可 以 帮助 用 户 更 好 地 识别 页 面 ， 页 面 的 
标题 有 且 只 有 一 个 . 它 位 于 HTML 文档 的 头 部 ， 即 <head> 和 </head> 之 间 . 


下 面 是 一 个 使 用 <title> 元 素 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 3-6 | title.html 


01 <!DOCTYPE html PUBLIC"-/W3C/DTD XHTML 1.0 Transitional/EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmilns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

06 ”<tile> 赤 壁 赋 </title> 


10 <html> 


该 实例 中 ， 在 06 行 中 <title> 元 素 中 定义 的 页 面 标题 为 “赤壁 赋 ”。 其 运行 后 ， 在 下 浏览 
器 中 的 显示 效果 ， 如 图 3-4 所 示 。 


3-4 页面 标题 在 浏览 器 的 显示 效果 


<title> 元 素 中 可 以 使 用 的 所 有 属性 包括 文本 显示 方向 属性 dir 和 指定 语言 属性 lang。 


3.4 元 信息 元 素 <meta> 


元 信息 元 素 <meta> 用 来 定义 页 面 的 附加 信息 。 其 中 包括 页 面 的 作者 、 版权、 关键 字 等 相关 


页 面 基 本 元 素 


信息 。 语 法 结构 如 下 所 示 : 
<meta 属性 =" 属 性 值 " > 


<mate> 元 素 是 一 个 自封 闭 的 元 素 , 通过 其 中 的 属性 来 添加 各 种 附加 信息 。<mate> 元 素 在 不 
使 用 任何 属性 时 ， 对 页 面 没 有 影响 。 关于 <mate> 元 素 中 所 使 用 的 属性 ,将 在 3.4.4 节 中 详细 讲解 。 


3.4.1 元 信息 元 素 名 称 属性 name 


name 属性 用 来 指定 文档 中 附加 信息 的 名 称 。 例 如 ， 最 常用 的 值 “keywords” 用 来 定义 文 
档 中 的 关键 字 ， 方 便 搜 索引 擎 的 搜索 (关于 关键 字 的 内 容 ， 请 参看 3.4.4 小 节 )。name 属性 的 语 
法 结构 如 下 所 示 : 


<meta name=" 信 息 名 称 " /> 


因为 在 <mate> 元 素 中 ,名 称 必须 对 应 有 相关 的 值 才能 生效 ， 所 以 具体 的 实例 将 在 讲解 完 有 
关 值 属性 后 进行 演示 。 


3.4.2 元 信息 元 素 的 值 content 


content 属性 用 来 指定 文档 中 附加 信息 的 值 。content 属性 是 与 name 属性 成 对 出 现 。 用 来 定 
义 附加 信息 的 具体 内 容 。 语 法 结构 如 下 所 示 : 


<mate name=" 信 息 名 称 " content-" 附 加 信息 的 值 " 亡 
下 面 是 一 个 使 用 content 属性 的 实例 ， 其 代码 如 下 所 示 。 


[ 例 程 3-7| meta-content.html 
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 ”<meta name="keywords" content=" 苏 轼 " /> 
06 ”<title> 赤 壁 赋 </title> 
07 </head> 
08 <body> 
09 </body> 
10 </html> 
11 <body> 
12 </body> 
13 </htm> 


在 实例 中 , 05 行 中 定义 了 页 面 关键 字 为 “苏轼 ”。 因 为 <meta> 元 素 中 所 定义 的 “keywords” 
信息 是 用 来 为 搜索 引擎 定义 关键 字 的 ， 所 以 对 页 面 显示 效果 并 不 产生 影响 。 该 实例 的 显示 效果 
与 图 3-4 相同 。 
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3.4.3 ”元 信息 元 素 的 附加 属性 http-equiv 


http-equiv 属性 和 name 属性 类 似 ， 用 来 指定 附加 信息 的 名 称 。 在 浏览 器 加 载 页 面 之 前 ， 服 
务 器 会 把 http-equiv 属性 定义 的 相关 信息 发 送 给 浏览 器 ， 便 于 在 浏览 器 中 正确 显示 页 面 。 语 法 
结构 如 下 所 示 : 

<mate http-equiv=" 信 息 名 称 " content=" 附 加 信息 的 值 " /> 


和 name 属性 类 似 ，http-equiv 属性 一 般 要 和 content 属性 成 对 出 现 。 下 面 是 一 个 使 用 
http-equiv 属性 的 实例 ， 其 代码 如 下 所 示 。 


meta-http-equiv.html 
01 <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html lang="en" xmlns="http:/www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="content-type" content="text/html" /> 
06 ”<tile> 九 月 </title> 
07 </head> 
08 <body> 
09 </body> 
10 </html> 


在 实例 中 ，05 行 中 使 用 http-equiv 属性 ， 提 示 浏 览 器 将 加 载 一 个 HTML 的 页 面 。 


3.4.4 ”设置 页 面 关键 字 


设置 页 面 关 键 字 是 为 了 向 搜索 引擎 说 明 这 一 网 页 的 关键 词 , 从 而 帮助 搜索 引擎 对 该 网 页 进 
行 查找 和 分 类 ， 它 可 以 提高 被 搜索 到 的 几率 ， 一 般 可 设置 不 只 1 个 关键 字 ， 之 间 用 逗号 隔 开 。 
但 是 由 于 很 多 搜索 引擎 在 检索 的 时 候 会 限制 关键 字数 量 ， 因 此 在 设置 关键 字 的 时 候 不 要 过 多 ， 
注意 每 一 个 关键 字 都 要 切中 要 害 。 语 法 结构 如 下 所 示 : 


<meta name="keywords" content=" 关 键 字 1, 关 键 字 2" /> 


上 面 为 设置 一 个 关键 字 和 两 个 关键 字 的 方法 。 在 content 属性 中 设置 多 个 关键 字 时 ， 每 个 
关键 字 之 间 需 要 用 英文 “,” 分 隔 开 。 下 面 是 一 个 使 用 关键 字 的 实例 ， 其 代码 如 下 所 示 。 


小三 长】 mate-keywords .html 


01 <!IDOCTYPE html PUBLIC "-WW3CWDTID XHTML 1.0 Transitional//EN" 

02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 ”<meta name"keywords" content="html 入 门 教程 .css 普通 教程 ,java 教程 " 户 
06 ”<title> 文 档 标题 </title> 

07 </head> 

08 <body> 
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页 面 内 容 部 分 。 


<Jbody> 
</html> 


在 上 面 的 实例 中 ，05 行 中 设 定 了 “html 入 门 教程 ”、“css 普通 教程 ”、“java 教程 ”这 
3 个 词语 作为 该 页 面 的 关键 字 。 


3.4.5 ”设置 页 面 主要 内 容 


使 用 name 属性 和 content 属性 ,可 以 设置 页 面 信息 的 主要 内 容 。 设置 页 面 主要 内 容 也 是 为 
了 便于 搜索 引擎 的 查找 。 页 面 主要 内 容 可 以 用 来 描述 网 页 的 主题 等 ， 与 关键 字 一 样 ， 设 置 的 页 
面 描述 也 不 会 在 网 页 中 显示 出 来 。 其 语法 结构 如 下 所 示 : 


<meta name"description" content=" 对 页 面 的 描述 语言 "> 


记 说明 
至 


为 页 面 描述 ， 在 content 中 定义 具体 的 描述 语言 。 


在 该 语法 中 ，name 为 属性 名 称 ， 这 里 设置 为 description， 也 就 是 将 元 信息 属性 设 | 


下 面 是 一 个 定义 主要 内 容 的 实例 ， 其 代码 如 下 所 示 。 
mate-description.html 


01 
02 
03 
04 
05 
06 
07 
08 


09 
10 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.o0rg/1999/xhtml"> 

<head> 

<meta name="description" content=" 李 白 简介 " /> 
<title> 唐 代 著 名 诗人 </title> 

</head> 

<body> 

页 面 内 容 部 分 。 

</body> 

</html> 


在 该 实例 中 ，05 行 中 设置 了 “李白 简介 ”为 网 页 的 描述 。 


3.4.6 ”定义 页 面 的 搜索 方式 


使 用 name 属性 和 content 属性 , 定义 页 面 搜索 方式 ,搜索 引擎 将 根据 页 面 定义 的 搜索 方式 ， 
对 页 面 的 信息 和 链接 进行 搜索 。 语 法 结构 如 下 所 示 : 


<meta name="robots" conten 人 "搜索 方式 " 广 


在 content 属性 中 ， 搜 索 方 式 可 以 有 6 种 选择 ， 其 具体 如 下 所 示 。 
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表 3-2 content 的 值 及 其 含义 


content 的 值 含义 
al 页 面 将 被 检索 ， 且 页 面 上 的 链接 可 以 被 查询 
di | 页 面 不 能 被 检索 ， 且 页 面 上 的 链接 不 可 以 被 查询 
| 页 面 将 被 检索 
follow | 页 面 上 的 链接 可 以 被 查询 
本 本 | 页 面 不 能 被 检索 ， 但 页 面 上 的 链接 可 以 被 查询 
本 页 面 不 能 被 检索 ， 页 面 上 的 链接 可 以 被 查询 


下 面 是 一 个 使 用 搜索 方式 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 3-11| mate-robots.html 


01 
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<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta name="robots" content=" noindex " /> 

<title> 全 唐诗 </title> 

</head> 

<body> 

页 面 内 容 部 分 。 

</body> 

</html> 


这 个 示例 中 05 行 中 设 定 了 页 面 不 能 被 检索 ， 但 页 面 上 的 链接 可 以 被 查询 。 


3.4.7 ”定义 页 面 的 跳 转 


在 浏览 网 页 时 经 常会 看 到 一 些 欢 迎 信息 的 界面 ， 在 经 过 一 段 时 间 后 ， 这 一 页 面 会 自动 转 到 
其 他 页 中 ， 这 就 是 网 页 的 跳 转 。 使 用 HIML 中 的 HTTP 代码 就 可 以 很 轻松 地 实现 这 一 功能 。 
语法 结构 如 下 所 示 : 

<meta http-equiv="refresh" content=" 跳 转 时 间 :url= 链 接地 址 "> 


下 | 说 明 = = = 
在 该 语法 中 ，refresh 表示 网 页 的 刷新 ， 而 在 content 中 则 设 定 的 是 刷新 的 时 间 和 


刷新 后 的 地 址 ， 时 间 和 链接 地 址 之 间 用 分 号 相隔 .默认 情况 下 ， 跳 转 时 间 是 以 秒 为 单 
人 位 的 


当 链 接地 址 为 一 个 新 的 网 页 地 址 时 ， 就 会 在 设 定 的 时 间 跳 转 到 这 个 新 的 网 址 。 下 面 是 一 个 
使 用 页 面 的 跳 转 的 实例 ， 其 代码 如 下 所 示 。 
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mate-refresh-url.html 
01 <!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 ”<html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 <meta http-equiv="refresh" content="$:url=http://www.haol23.com"> 
07 <title> 全 唐诗 </title> 
08 </head> 


<body> 
您 好 ， 页 面 将 在 $ 秒 后 跳 转 至 http://www.hao123.com。 
10 </body> 
11 <html> 


上 面 的 代码 在 06 行 中 设置 了 页 面 跳 转 。 运 行 上 面 代码 的 时 候 显示 如 图 3-5 所 示 。 在 5 秒 
之 后 ， 网 页 自动 跳 转 到 www.hao123.com 网 站 ， 如 图 3-6 所 示 。 


文件 加 久久 中 | 查看 oI。 收音 人 ET | E37 


OO Nm Wm ” 


觅 相 | 色 ] bw Deewmarts\03\tntitlet-i1 hz] 国 稀 到 | 草本 光 


您 好 ， 页 画 将 在 5 秒 后 跑 灶 至 | 
httpJfwww hao123 come 


一 1 
泪 之 家 "rm 一 忆 
| 


BE leila C7 加 EE mil Lc 加 


图 3-5” 跳 转 前 的 页 面 图 3-6 跳 转 后 的 页 面 


3.4.8 定义 页 面 的 作者 信息 
在 html 中 使 用 name 属性 和 content 属性 来 定义 页 面 的 作者 信息 。 语 法 结构 如 下 所 示 : 


<meta name=" author " content=" 作 者 " 亡 
下 面 是 一 个 定义 作者 信息 的 实例 ， 其 代码 如 下 所 示 。 
mate-author.html 


01 <!IDOCTYPE html PUBLIC "-WW3CWDTID XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 

06 <meta name=" author " conten 人 " 张 三 " 户 

07 <title> 作 者 简介 </title> 
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08 
09 


10 
11 


</head> 


<body> 
全 唐诗 讲解 的 作者 张 三 。 
</body> 
<html> 


上 面 的 实例 中 ，06 行 中 将 作者 的 姓名 “ 张 三 ”添加 到 了 网 页 的 源 代码 中 。 


3.4.9 


定义 页 面 的 版 权 信 息 


name 属性 和 content 属性 也 可 以 来 定义 页 面 所 使 用 的 版 权 。 语 法 结构 如 下 所 示 : 


<meta name=" Copyright" content=" 版 权 " /> 
下 面 是 一 个 使 用 版 权 信息 的 实例 ， 其 代码 如 下 所 示 。 
mate-copyright.html 


11 
12 


<!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<meta name=" Copyright" content=" 版 权 " /> 

<title> 版 权 所 有 </title> 

</head> 

< 

此 页 面 页 面 版 权 为 张 三 所 有 。 

</body> 

</html> 


运行 代码 后 ，06 行 中 提示 此 页 面 的 版 权 为 张 三 所 有 。 


3.4.10 ”定义 页 面 的 刷新 时 间 


人 们 在 游览 网 页 时 经 常会 遇 到 一 些 定时 刷新 的 页 面 。 这 些 页 面 采用 动态 更 新 的 方式 显示 ， 
所 以 每 间隔 一 定 的 时 间 就 会 自动 刷新 页 面 ， 可 以 使 浏览 者 方便 看 到 最 新 添加 的 信息 。 在 HTML 
中 可 以 用 http_equiv 属性 和 content 属性 定义 页 面 刷新 时 间 。 其 语法 结构 如 下 所 示 。 


<meta http-equiv=" refresh " content=" 时 间 " /> 
刷新 页 面 所 使 用 的 时 间 单 位 是 秒 。 下 面 是 一 个 使 用 刷新 时 间 的 实例 ， 其 代码 如 下 所 示 。 
mate-refresh.html 


01 
02 
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<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 
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11 


<meta http-equiv=" refiesh " content="6" /> 
<title> 千 家 诗 </title> 

</head> 

<body> 

页 面 内 容 部 分 。 

</body> 

</html> 


在 上 面 的 代码 中 ，06 行 定义 该 页 面 6 秒 刷新 一 次 。 


3.5 | 基本 设置 元 素 <base> 


在 HIML 中 基本 设置 元 素 <base> 用 来 定义 相对 路 径 的 根 目录 。 使 用 <base> 元 素 , 可 以 方便 
地 定义 页 面 中 的 超级 链接 。 语 法 结构 如 下 所 示 : 
<base 属性 =" 属 性 值 " > 


<base> 元 素 在 不 使 用 任何 属性 时 ， 对 页 面 没有 影响 。 关 于 <base> 元 素 中 所 使 用 的 属性 ， 将 
在 第 8 章 中 详细 讲解 。<base> 元 素 中 可 以 使 用 的 属性 有 链接 路 径 属性 href 和 链接 窗口 属性 target。 
href 属性 用 来 指定 文档 中 相对 链接 的 根 目录 。 文 档 中 的 所 有 链接 (包括 图 片 、 音 频 等 内 容 ) 
都 按照 href 属性 所 指定 的 根 目 录 显示 。 语 法 结构 如 下 所 示 : 


<base hre 全 "指定 路 径 "> 包含 的 内 容 部 分 </base > 


href 属性 的 取 值 为 URL 值 (关于 URL 值 的 详细 内 容 ， 请 参看 第 8 章 )。 它 可 以 使 用 绝对 路 
径 ， 也 可 以 指向 某 个 文件 夹 。 下 面 是 一 个 href 属性 取 值 为 绝对 路 径 的 实例 。 其 代码 如 下 所 示 。 


wa base-href.html 


01 


<!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional/EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<base hre 人 ="http://www.baidu.com" /> 

<title> 页 链接 路 径 </title> 

</head> 

<body> 


含有 链接 的 图 片 : <img strc="http://www.baidu com/img/baidu logo.gif' alt="pic" /> 


10 
Ll 


</body> 
<html> 
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说 明 
开 09 行 代码 中 , 含有 链接 的 元 素 为 <img> ES 人 
元 素 (关于 <img> 元 素 的 详细 内 容 , 请 参看 第 友 有 榜 按 的 图 片 国 
6 章 )。 其 中 src 属性 的 值 , 就 是 链接 的 路 径 。 
~ Bai 百度 
该 实例 中 ， 使 用 <base> 元 素 定义 页 面 所 有 链接 的 
根 目 录 为 “http://www. baidu.com”。 其 运行 后 的 显示 
效果 如 图 3-7 所 示 。 
在 页 面 <img> 元 素 中 ， 使 用 相对 路 径 ， 调 用 了 i 引 


“www.baidu.com” 上 的 一 个 图 片 。 使 用 的 相对 路 径 值 


图 3-7 定义 <base> 元 素 链接 属性 后 的 页 面 


为 “http://www.baidu.com/img/baidu logo.gif”。 


3.6 | 创建 样式 元 素 <style> 


创建 样式 元 素 <style> 用 来 创建 本 页 面 中 所 使 用 的 样式 (关于 样式 的 详细 内 容 ， 请 参见 本 书 
11.3 节 )。 使 用 <style> 元 素 创建 的 样式 内 容 只 能 够 被 当前 页 面 使 用 。 语 法 结构 如 下 所 示 。 


<style> 级 联 样式 </style> 
下 面 是 一 个 使 用 <style> 元 素 的 实例 ， 其 代码 如 下 所 示 。 


style.html 
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<!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
"http:/www.w3.ore/TR/xhtmll/DTDAxhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 样 式 说 明 </title> 

<style> 

body{ 

color:#00FF33; 

font-size: 18px: 

font-weightbold:} 

</style> 

</head> 

< 


> 
请 注意 这 个 页 面 文 本 的 显示 效果 。 


</body> 
<html> 


在 以 上 代码 中 , 在 07 到 09 之 间 的 <style> 元 素 通过 级 联 样式 定义 了 页 面 主体 中 文本 的 显示 


“3 
方式 ， 并 定义 字体 的 颜色 为 绿色 ， 字 体 大 小 为 18 像素 ， 字 体 显示 为 加 粗 。 其 运行 后 ， 显 示 效 


果 如 图 3-8 所 示 。 


3.6.1 ”类 型 属性 type 


type 属性 ， 用 来 指定 <style> 元 素 中 所 包含 内 容 的 类 型 。 一 般 情况 下 ， 不 指明 type 属性 时 ， 
浏览 器 是 可 以 辨别 内 容 的 类 型 的 。 但 为 了 防止 和 js 脚本 等 混淆 ， 最 好 定义 type 属性 。 语 法 结 
构 如 下 所 示 : 


<style type=" 类 型 "></style> 


在 <style> 元 素 中 ， 类 型 属性 的 值 为 “textcss”。 下 面 是 一 个 使 用 类 型 属性 的 实例 ， 其 代码 
如 下 所 示 。 


| 例 程 3-18 | style-type.html 
01 <!IDOCTYPE html PUBLIC "-/W3CWDTD XHTML 1.0 Transitional/EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 -<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
05 <title> type 属性 说 明 </title> 


10 

不 识 庐山 真面目 ， 只 缘 身 在 此 山中 。 

11 </body> 

12 </html> 

在 以 上 代码 中 ，06 到 08 行 通过 <style> 元 素 定 义 字体 颜色 为 紫色 ， 字 体 为 26 号 ， 字 体 显 


示 为 加 粗 。 其 运行 后 显示 效果 如 图 3-9 所 示 。 其 与 不 指明 类 型 属性 的 页 面 效 果 显 示 基 本 相同 。 


type 屋 性 说 明 - Wicrosoft IIS 全国 阿 [=JEI 
文件 人 编辑 人 E) 查看 WD 收藏 疏 。 工 」” 
Qa OF 四 因 久 | 于 


文件 如 编 六 @ Err WR 了 村 FE 


QO- | I 


不 识 庐 山 真面目 ， 只 缘 “ 
身 在 此 山中 。 


图 3-8 使 用 <style> 元 素 后 的 显示 效果 图 3-9 页 面 显 示 效 果 
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3.6.2 ”类 型 属性 media 


media 属性 用 来 指定 <style> 元 素 中 所 包含 内 容 作用 的 媒体 。 因 为 一 般 情况 下 ， 制 作 的 网 页 
可 能 在 不 同 的 浏览 设备 中 使 用 ， 指 明 使 用 的 媒体 将 有 助 于 页 面 的 显示 。 其 语法 结构 如 下 所 示 。 
<style media=" 媒 体 类 型 "></style> 


在 media 属性 中 ， 可 以 使 用 多 种 媒体 ， 具 体 的 取 值 如 表 3-3 所 示 。 


表 3-3_media 属性 的 取 值 及 含义 


代码 属性 值 含义 
Screen 电脑 的 显示 器 
tv 电视 
rint 打印 机 
aural 音频 设备 
文本 
all 所 有 设备 


当 指 定 多 个 媒体 时 ， 每 个 媒体 值 之 间 ， 用 英文 的 “,” 分 隔 。 


下 面 是 一 个 使 用 media 属性 的 实例 ， 其 代码 如 下 所 示 。 
style-media.html 


01 <!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<title> 使 用 media 属性 </title> 
07 <style media="sreen,tv"> 
08 body{ 
color:# CCO000; 
font-size:26px: 
font-weight:bold;} 
09 </style> 
10 </head> 
11 <body> 
请 注意 页 面 的 显示 效果 。 
12 </body> 
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07 行 用 <style media="sreen,tv "> 定义 使 用 的 多 媒体 工具 为 电脑 显示 器 和 电视 机 。 


页 面 基 本 元 素 


<html> 


链接 元 素 <link> 


4 


链接 元 素 <link> 用 来 指定 文档 与 其 他 文档 之 间 的 关系 。 使 用 <link> 元 素 ， 可 以 用 来 调用 其 
他 文档 中 的 内 容 ， 如 级 联 样式 表 等 。 其 语法 结构 如 下 所 示 。 


<link 属性 =" 属 性 值 " > 
下 面 是 一 个 使 用 <link> 元 素 的 实例 ， 其 代码 如 下 所 示 。 


Wao link.html 


01 
02 


08 


09 
注意 
10 
11 


07 行 中 代码 在 标题 中 链接 了 一 个 main.css 的 样式 (具体 应 上 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 全 唐诗 </title> 

<link href=" main.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

页 面 文本 内 容 部 分 的 显示 效果 。 

</body> 

</html> 


中 可 以 使 用 的 所 有 属性 如 表 3-4 所 示 。 


表 3-4 <link> 元 素 的 所 有 属性 


请 参考 第 12 章 )。<link> 元 素 


属性 名 称 写 过 
文本 显示 方向 属性 dir 
指定 语言 属性 Jan 
类 型 属性 type 
媒体 选择 属性 media 
标题 属性 title 
字符 集 名 称 属性 charset 
指定 链接 路 径 属性 href 
源 文档 与 目标 文档 关系 属性 rel 
目标 文档 与 源 文档 关系 属性 Tev 
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( 续 表 ) 


属性 名 称 
链接 窗口 属性 


标记 属性 


类 属性 


定义 级 联 样式 属性 


3.7.1 指定 链接 路 径 属性 href 


href 属性 用 来 指定 <link> 元 素 中 链接 文档 的 路 径 。 其 语法 结构 如 下 所 示 。 
<link hre 合 "指定 的 路 径 " /> 


| 


也 注意 - 


了 本 在 <link> 元 素 中 ,href 属性 是 必须 的 .其 取 值 可 以 是 绝对 路 径 也 可 以 是 相对 路 径 ( 关 
于 路 径 的 知识 ， 请 参见 第 8 章 )。 


下 面 是 一 个 使 用 href 属性 的 实例 ， 其 代码 如 下 所 示 。 
link-href.html 


01 <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
06 ”<title>href 属性 说 明 </title> 

07 <link href="style/main.css" /> 

08 </head> 

09 <body> 

这 是 页 面 文本 内 容 部 分 ， 注 意 文本 的 显示 效果 。 

10 </body> 

11 </htm> 


07 行 代码 在 标题 中 链接 了 一 个 main.css 的 样式 (具体 应 用 参考 第 12 章 )。 


3.7.2 ”链接 的 类 型 属性 type 


type 属性 用 来 指定 <link> 元 素 中 链接 文档 的 类 型 。 其 语法 结构 如 下 所 示 。 
<link type=" 文 档 类 型 " /> 


下 面 是 一 个 使 用 type 属性 的 实例 ， 其 代码 如 下 所 示 。 
link-type.html 


01 <!IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
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08 


页 面 基 本 元 素 


"http:/www.w3.org/TR/xhtmlIDTDAxhtmll-transitionaldtd"> 
<html xmlns= "http://www-w3.org/1999/xhtml"> 


<head> 


<meta http-equiv="Content-Type" content="text/html: charset=—utf-8" /> 


<title> 文 档 标题 </title> 


<link href=" main.css" type="text/css" /> 


</head> 


09 <body> 
这 是 页 面 文本 内 容 部 分 ， 注 意 文本 的 显示 效果 。 


10 
11 


</body> 
</html> 


07 行 代码 在 标题 中 链接 了 一 个 类 型 为 “textcss” 的 css 样式 (具体 应 用 参考 第 12 章 )。 


3.7.3 


ee 


源 文档 与 目标 文档 关系 属性 rel、rev 


rel 属性 用 来 指定 源 文档 到 链接 文档 之 间 的 关系 。rev 属性 用 来 指定 链接 文档 到 源 文档 之 间 
的 关系 。 其 语法 结构 如 下 所 示 。 


rel 属性 并 不 是 XHTML 标准 中 定义 的 属性 ， 但 是 在 定义 链接 时 经 常用 到 。 


<linkrel=" 文 档 关系 " 亡 
rel 属性 和 rev 属性 可 以 同时 使 用 ， 它 们 的 使 用 方法 也 相同 。 它 们 的 部 分 取 值 和 含义 如 表 


3-5 所 示 。 
表 3-5_rel 属性 和 rev 属性 的 部 分 取 值 和 含义 
属 性 值 代表 的 含义 
next 链接 到 下 一 个 文档 
prev 链接 到 前 一 个 文档 
head 链接 到 集合 中 的 顶级 文档 
toc 链接 到 集合 的 目录 
t 链接 到 源 上 面 的 文档 
child 链接 到 源 下 面 的 文档 
index 链接 到 此 文档 的 索引 
glossary 链接 到 此 文档 的 术语 表 
stylesheet 链接 到 样式 片段 


下 面 是 一 个 使 用 rel 属性 的 实例 ， 其 代码 如 下 所 示 。 
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RY link-rel.html 


01 


10 
wy 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 文 档 标题 </title> 

<link href="style/main.css" rel="stylesheet" /> 

</head> 


<body> 
这 是 页 面 文本 内 容 部 分 ， 注 意 文本 的 显示 效果 。 


/body> 
</html> 


在 该 实例 中 ，07 行 中 使 用 rel 属性 定义 文档 之 间 的 关系 为 样式 片段 。 


3.7.4 ”链接 样式 文件 


通过 <link> 元 素 及 其 相应 的 属性 , 实现 调用 级 联 样式 表 文件 的 目的 。 其 语法 结构 如 下 所 示 。 
<link hre 全 "样式 路 径 ，" rel=" 文 档 关系 " type=" 文 件 类 型 " > 


下 面 是 一 个 定义 链接 样式 文件 的 实例 。 其 代码 如 下 所 示 。 


La link-style.html 
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<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtml] -transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title>link 属性 </title> 

<link href="main.css" rel="stylesheet" type="text/css" /> 

</head> 


<body> 


这 是 页 面 文 本 内 容 部 分 ， 注 意 文本 的 显示 效果 。 
10 </body> 


11 


</htm> 


在 以 上 代码 中 ，07 行 中 使 用 <link> 元 素 调用 了 一 个 名 称 为 main.css 的 样式 文件 。 该 文件 中 
具体 定义 的 样式 内 容 如 下 所 示 。 


body 


{ 


width:200px; 
height: 120px: 
background:#999999 


} 


和 该 样式 中 ， 定 义 <body> 元 素 的 背景 色 为 蓝 绿色 ， 文 本 颜色 为 黑色 ， 字 体 大 小 为 
24 像素 ， 字 体 样式 为 加 得 。 


代码 运行 后 ， 其 显示 效果 如 图 3-10 所 示 。 
在 以 上 的 代码 中 ，<link> 元 素 的 rel 属性 取 值 为 stylesheet， 表 明了 将 链接 的 文件 为 样式 片 
段 文件 。 如 果 取 消 rel 属性 ， 则 页 面 的 显示 效果 如 图 3-11 所 示 。 


到 到 | 辐 tr 园 厂矿 厂矿 三 应 观 山 7 
图 3-10 ”使 用 链接 样式 之 后 的 显示 效果 


3-11 取消 rel 属性 后 的 显示 效果 
从 以 上 实例 可 以 看 出 ， 虽 然 rel 属性 不 是 XHTML 标准 中 的 属性 ， 但 是 对 能 否 正常 调用 链 
接 文件 有 很 大 的 影响 。 
3.7.5 制作 收藏 夹 图 标 
通过 <link> 元 素 及 其 相应 的 属性 ， 制 作 收藏 夹 中 的 图 标 。 其 语法 结构 如 下 所 示 。 
<linkrel="Shortcut Icon" hre 全 "图 标 路 径 "type="image/x-icon'" /> 


在 制作 收藏 夹 图 标 时 , <link> 元 素 中 , rel 属性 的 值 为 “shortcut icon”, 类 型 为 “mage/x-icon”。 
同时 图 标 要 使 用 相应 的 icon 格式 图 标 。 下 面 是 一 个 制作 收藏 夹 图 标的 实例 。 其 代码 如 下 所 示 。 


link-shortcut.html 


01 <!DOCTYPE html PUBLIC"-/W3C/DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtml1-transitional.dtd"> 

03 ”<html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 

06 ”<title> 文 档 标题 </title> 

07 -<link rel="Shortcut Icon" href="http://www.w3pop.com/favicon.ico" type="image/x-icon" /> 
08 </head> 

09 <body> 


跟 我 学 HTML+CSS 


这 是 页 面 文本 内 容 部 分 。 

10 <body> 

11 <html> 

代码 中 07 行 定义 了 收藏 来。 代码 运行 后 ， 将 页 面 添 
加 到 收藏 夹 中 ， 其 在 正 浏览 器 中 的 显示 效果 ， 如 图 3-12 
所 示 。 


从 图 3-12 中 可 以 看 出 , 此 时 页 面 在 收藏 夹 中 显示 出 特 
有 的 图 标 。 3-12 ”制作 后 的 收藏 夹 显示 效果 


本 .8 脚本 元 素 <script> 


脚本 元 素 <script>， 用 来 在 页 面 中 定义 一 个 可 执行 的 脚本 ， 完 成 相应 的 行为 ， 如 鼠标 点 击 
事件 等 。 语 法 结构 如 下 所 示 。 


<scrip 世 脚本 内 容 </script> 


<script> 元 素 ， 不 但 可 以 使 用 在 文档 头 部 ， 也 可 以 用 于 文档 的 主体 部 分 。 下 面 是 一 个 在 文 
档 主体 中 使 用 <script > 元 素 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 3-26 | script.html 


01 <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<title> 脚 本 讲解 </title> 
07 </head> 
08 <body> 
接 下 来 页 面 出 现 的 <script> 
<! 一 
09 ”document.write("<strong> 脚 本 内 容 </strong>"); 
一 > 
10 </script> 
11 </body> 
12 <html> 


在 该 实例 中 , 使 用 脚本 实现 了 将 内 容 输出 到 浏览 器 的 效果 。 其 中 09 行 中 <strong> 元 素 用 来 
定义 文本 加 粗 (关于 <strong> 元 素 的 详细 内 容 ， 请 参看 第 4 章 )。<script> 元 素 中 所 使 用 属性 的 含 
义 ， 将 在 3.8.1 节 和 3.8.2 节 中 具体 介绍 。 代 码 运行 后 ， 其 显示 效果 如 图 3-13 所 示 。 
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D: My Docments\03\lintitled-26. h | 区 3 和 


接 下 来 页 面 出 现 的 脚本 内 容 


3-13 ”使 用 <script> 元 素 的 显示 效果 


3.8.1 脚本 的 语言 属性 language 
language 属性 的 作用 是 : 定义 脚本 中 使 用 的 语言 。 其 语法 结构 如 下 所 示 。 
<script language=" 脚 本 语言 "> 脚本 内 容 </script> 


在 制作 页 面 时 ， 一 般 常用 的 脚本 语言 有 两 种 。 一 种 是 JavaScript， 另 一 种 是 VBScript。 下 
面 是 使 用 language 属性 的 实例 ， 其 代码 如 下 所 示 。 


script-language.html 

01 <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 脚 本 语言 属性 </title> 

</head> 


RSRRSRRS 


<body> 
此 时 页 面 显示 的 是 : 
09 <scriptlanguage="VBScript"> 
<! 一 


document write("<strong> 脚 本 内 容 </strong>"); 


-> 

10 -</script> 
11 </body> 
12 <html> 


该 实例 中 的 脚本 和 例 程 3-26 中 基本 相同 ， 只 是 在 09 行 的 <scrip> 元 素 中 加 入 了 language 
属性 。 代 码 运行 后 的 显示 效果 和 例 程 3-26 基本 相同 。 
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3.8.2 ”脚本 的 类 型 属性 type 


type 属性 的 作用 是 定义 脚本 中 使 用 的 语言 类 型 。 其 语法 结构 如 下 所 示 。 
<script type=" 脚 本 语言 类 型 "> 脚本 内 容 </script> 


type 属性 的 作用 和 language 属性 基本 相同 , 不 过 在 属性 值 的 写法 上 有 所 区 别 。 其 中 属性 值 
的 具体 写法 如 下 所 示 。 


we script-type.html 
01 <!DOCTYPE html PUBLIC"-/W3C/DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 ”<html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<title> 脚 本 类 型 讲解 </title> 
07 </head> 


08 <body> 

接 下 来 显示 的 是 : 

09 <scripttype="text/vbscrip"> 

a 
document.write("<strong> 脚 本 内 容 </strong>"); 
-> 


10 </script> 
11 </body> 
12 <html> 


代码 运行 后 的 显示 效果 和 例 程 3-26 基本 相同 。 


3.8.3 推迟 执行 属性 defer 


defer 属性 使 脚本 中 不 显示 的 内 容 推迟 执行 。 目 的 是 加 快 页 面 的 显示 速度 。 其 语法 结构 如 
下 所 示 。 
<script defer=defer> 脚 本 内 容 </script> 


defer 属性 是 没有 值 的 ,按照 HIML 的 语法 规则 ,要 使 用 自身 名 称 作为 值 。 因为 defer 属性 
用 于 非 显 示 的 脚本 内 容 ， 所 以 本 书 在 此 就 不 做 实例 演示 了 。 


3.8.4 ”脚本 的 链接 属性 src 

src 属性 的 作用 是 链接 外 部 的 脚本 文件 。 其 语法 结构 如 下 所 示 。 

<script ste=" 脚 本 文件 的 路 径 "> </script> 

在 XHTML 中 , 推荐 使 用 外 部 链接 的 脚本 。 下 面 是 使 用 src 属性 的 实例 ,其 代码 如 下 所 示 。 
scriptsrc html 

01 <!IDOCTYPE html PUBLIC "-WW3CWDTID XHTML 1.0 Transitional//EN" 


02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
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页 面 基本 元 素 


04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 
06 ”<title> 肢 本 类 型 </title> 
07 </head> 
08 <body> 
接 下 来 显示 的 是 : 
09 <script language="JavaScript" type="text/javascript" src="content.js"> 
<!— 
document.write("<strong> 脚 本 内 容 </strong>"): 
SS 
10 </script> 
11 </body> 
12 <html> 


在 “contentjs” 中 ， 使 用 的 脚本 如 下 所 示 。 


3 
document.write("<strong> 脚 本 内 容 </strong>"); 


-> 


代码 运行 后 的 显示 效果 和 例 程 3-26 中 基本 相同 。 


3. 党 页 面 主体 元 素 <body> 


页 面 主体 元 素 <body> 用 来 包含 页 面 所 要 显示 的 内 容 。 包 括 文本 元 素 、 图 像 元 素 、 表 单元 素 
等 各 种 页 面 元 素 。 同 时 可 以 设置 整个 页 面 的 背景 、 边 界 等 相关 属性 。 语 法 结构 如 下 所 示 。 


<body> 页 面 主体 内 容 </body> 
下 面 是 一 个 使 用 <body> 元 素 的 实例 ， 其 代码 如 下 所 示 。 


body html 
01 <!IDOCTYPE html PUBLIC "-/W3CWDTD XHTML 1.0 Transitional/EN" 
02 "http:/www.w3.ore/TR/xhtmll/DTDAxhtmll-transitionaldtd"> 
03 ”<html xmins="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 ”<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
06 ”<tile> 文 档 标题 </title> 
07 </head> 
08 <body> 
页 面 主体 中 的 内 容 
09 </body> 
10 </html> 


在 不 定义 任何 属性 时 ，08 和 09 行 中 <body> 元 素 中 的 内 容 会 和 浏览 器 的 边线 保持 一 定 的 距 
离 (在 不 同 的 浏览 器 中 这 个 距离 是 不 同 的 )。 下 面 是 该 实例 运行 后 ， 在 正 浏览 器 中 的 显示 效果 ， 
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跟 我 学 HTML+CSS 


如 图 3-14 所 示 。 


文件 中 编 得 加 查看 收 意 庆 ) 工具 IT 姑且 山寺 


OO UU | om” 


地 让 | 关 ] w nc<==t<vsvtntitsa3a ta 相国 苇 到 | 旋 这 于 


大 江东 去 浪 淘 尽 ， 干 证 风流 人 物 - 


到 


Bb 本 于 型 Py Cr 


3-14 ”<body> 元 素 在 正 浏览 器 中 的 显示 效果 


<body> 元 素 中 可 以 使 用 的 所 有 属性 如 表 3-6 所 示 。 


表 3-6 <body> 元 素 的 所 有 属性 


属性 名 称 写法 
文本 显示 方向 属性 dir 
指定 语言 属性 lang 
背景 图 片 属性 background 
背景 颜色 属性 bgcolor 
标题 属性 tite 
文本 属性 charset 
指定 链接 路 径 属 性 text 
链接 属性 link 
已 链接 属性 vlink 
激活 链接 属性 alink 
标记 属性 id 
类 属性 class 
定义 级 联 样式 属性 style 
左边 界 属性 leftmargin 
上 边界 属性 topmargin 


<body> 元 素 的 背景 和 文本 属性 是 制作 页 面 时 常用 的 属性 。 内 容 包括 bgcolor 属性 、 
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页 面 基本 元 素 
background 属性 、bgproperties 属性 和 text 属性 ， 下 面 进 行 详细 讲解 。 


3.9.1 主体 元 素 的 背景 属性 bgcolor 


bgcolor 属性 用 来 指定 页 面 所 使 用 的 背景 颜色 。 其 语法 结构 如 下 所 示 。 
<body bgcolor=" 颜 色 值 "> 包含 的 内 容 部 分 </body> 


bgcolor 属性 的 取 值 ， 可 以 使 用 颜色 名 称 ， 也 可 以 使 用 16 进 制 的 颜色 代码 值 。16 进 制 的 颜 
色 代码 的 含义 是 ， 使 用 6 位 的 数字 (如 “#ftp900”) 来 定义 颜色 值 。 其 中 ， 每 连续 两 个 数字 代表 
一 种 原色 值 。 原 色 按 照 “ 红 、 绿 、 蓝 ”的 顺序 排列 。 数 值 越 大 ， 代 表 颜 色 所 占 的 比例 越 大 。 

另外 ， 在 使 用 颜色 名 称 时 ， 并 不 是 所 有 的 颜色 名 称 都 能 够 正常 显示 。bgcolor 属性 的 具体 
取 值 ， 如 表 3-7 所 示 。 


表 3-7_bgcolor 属性 的 取 值 及 含义 


属 二 性 工 值 含义 属 性 值 含义 

red 红色 purple 紫 

ellow 黄 灰 

blue 蓝 lime 浅 绿 

silver 银 maroon 褐 

teal 深 青 a 水 绿 

white 白 black 黑 

na 深蓝 fuchsia 紫红 

olive 橄榄 green 绿 

#19900 十 六 进 制 颜色 


下 面 是 一 个 使 用 bgcolor 属性 的 实例 ， 其 实例 代码 如 下 所 示 。 
body-bgcolor-name.html 


01 <!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<tite> 赤 壁 赋 </title> 

07 </head> 

08 <body bgcolor="yellow"> 

大 江东 去 浪 淘 尽 ， 千古 风流 人 物 。 

09 </body> 

10 <html> 


在 实例 中 ，08 行 中 使 用 的 颜色 值 为 yellow。 其 运行 后 的 显示 效果 ， 如 图 3-15 所 示 。 使 用 
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颜色 名 称 的 颜色 值 来 定义 页 面 背景 ， 可 以 选择 的 背景 是 很 少 的 。 如 果 想 制作 出 更 加 精彩 的 背景 
颜色 , 可 以 使 用 16 进 制 的 颜色 值 。 下 面 是 一 个 使 用 16 进 制 的 颜色 值 的 实例 ,其 代码 如 下 所 示 。 


全 E22 body-bgcolor-16.html 


<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
员 "http:/www.w3.ore/TR/xhtmlI/DTD/xhtmll-transitionaldtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
06 ”<tite> 赤 壁 赋 </title> 
07 </head> 
08 <body bgcolor="#FFFF00"> 
大 江东 去 浪 淘 尽 ， 千 古风 流 人 物 。 


在 实例 中 ，08 行 中 使 用 的 颜色 值 为 “二 FFF00”， 也 是 黄色 的 。 其 运行 后 的 显示 效果 如 图 
3-16 所 示 。 


西 中] llE| 
文件 介 刀 多 E) 查看 WD 收藏 W) 工具 0) 帮助 DD | 导 OT 各 和 
; 中 天 ” CE MERAID SL A 
直面 [加 w Docwnent sW3Vatitlet33 hul 了 | 区 ] 条 到 | 大病 下 狠 址 加 | 人 ] sy Docomentz' 03\Untitled-34.htnl 二 | 区] 我 到 | 链 摘 > 
大 江东 去 浪 淘 尽 ， 千 古风 流 人 物 。 - 大 江东 去 浪 淘 尽 ,千古 风流 人 物 。 
J En 
ED TT 雕 Re 


图 3-15 bgcolor 属性 中 使 用 颜色 名 称 的 表现 效果 ”图 3-16 bgcolor 属性 中 使 用 16 进 制 的 颜色 的 表现 效果 


3.9.2 ”主体 元 素 的 背景 图 片 属性 background 


background 属性 用 来 指定 页 面 所 使 用 的 背景 图 片 。 指 定 的 背景 图 片 ， 将 按照 从 上 到 下 ， 从 
左 到 右 的 方式 重复 显示 。 语 法 结构 如 下 所 示 。 

<body backeround= "图片 的 路 径 "> 包含 的 内 容 部 分 <body> 

background 属性 的 取 值 为 URL 值 。 它 可 以 使 用 绝对 路 径 ， 也 可 以 使 用 相对 路 径 ( 关 于 URL 
值 的 详细 内 容 ， 请 参看 第 8 章 )。 下 面 是 一 个 使 用 background 属性 的 实例 。 其 代码 如 下 所 示 。 


WE body-background.html 
01 <!DOCTYPE html PUBLIC "-/W3CWDTD XHTML 1.0 TransitionaV/EN" 
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07 
08 


"http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 


<html xmlns= "http://www-w3.org/1999/xhtml"> 
<head> 


<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 


<title> 文 档 标 题 </title> 
</head> 


<body background="http://www.baidu.com/img/baidu logo.gif'> 


页 面 主体 中 的 内 容 


09 
10 


</body> 
</html> 


该 实例 中 ，08 行 中 使 用 background 属性 ， 定 义 的 页 面 所 使 用 的 背景 图 片 为 baidu 站 点 的 
logo。 其 运行 后 的 显示 效果 如 图 3-17 所 示 。 


Bd > MONEE¢ 


FT] rr 


页 面 主 体 中 的 ie 


Bai 僻 下 Bai 交 天 
Bai 字 E 度 。 ”Bai 闻 EE 度 


有 0 
Bai 字 EE 度 。 Bai 站 E 度 
| 
EE LF L772 


图 3-17 定义 background 属性 后 的 显示 效果 


在 background 属性 中 定义 的 背景 图 片 ,不 能 控制 其 重复 、 位置 等 属性 。 关 于 背景 图 片 的 精 
确 控 制 ， 请 参看 本 书 第 8 章 内 容 。 


3.9.3 ”主体 元 素 的 背景 图 片 滚动 属性 bgproperties 


bgproperties 属性 用 来 指定 背景 图 片 能 否 滚动 。 背 景 图 片 滚动 的 含义 是 ， 当 拖 动 浏览 器 滚 条 
时 ， 页 面 背景 可 以 随 滚 条 一 起 改变 位 置 。 语 法 结构 如 下 所 示 。 


<body background=" 图 片 的 路 径 " bgproperties="fixed"> 包 含 的 内 容 部 分 </body> 
因为 bgproperties 属性 是 用 来 控制 背景 图 片 的， 所 以 一 定 要 和 background 属性 一 起 使 用 。 


bgproperties 属性 只 有 一 个 值 fixed, 含义 是 背景 图 片 固定 。 下面 是 使 用 bgproperties 属性 的 实例 。 


其 代码 如 下 所 示 。 


Wb body-bgproperties.html 


01 <!IDOCTYPE html PUBLIC"-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.o0rg/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 


04 <head> 
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05 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 

06 ”<title> 文 档 标题 </title> 

07 </head> 

08 <body background=" http://www.baidu.com/img/baidu logo.gif " bgproperties="fixed"> 
09 <table height="400"> 


<t> 
<td> 页 面 主体 中 的 内 容 </td> 


和 


该 实例 中 09 到 10 行使 用 了 <table> 元 素 ， 用 来 产生 滚 条 (关于 <table> 元 素 的 详细 内 容 ， 请 
参看 第 7 章 )。 其 运行 后 的 显示 效果 如 图 3-18 所 示 。 当 拖 动 滚 条 后 ， 其 显示 效果 如 图 3-19 所 示 
(注意 滚 条 所 在 的 位 置 )。 


Ba 名 E 度 。。 Ba 八 


页 面 主体 中 的 内 容 


Bai 巡 天 度 


图 3-18 ”使 用 bgproperties 属性 的 表现 效果 3-19 ” 拖 动 滚 条 后 的 表现 效果 


从 图 3-19 可 以 看 出 ， 当 使 用 了 bgproperties 属性 后 ， 拖 动 滚 条 时 ， 背 景 保持 不 动 。 如 果 取 
消 bgproperties 属性 ， 当 拖 动 滚 条 到 相同 位 置 时 ， 页 面 的 显示 效果 如 图 3-20 所 示 。 


Bai 必 se Ba 志 


页 面 主体 中 的 内 容 
00, 804 
Baid 百度 Bai@ 
图 3-20 取消 bgproperties 属性 后 的 显示 效果 
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页 面 基 本 元 素 


3.9.4 ”主体 元 素 的 文本 属性 text 


text 属性 的 作用 是 : 用 来 指定 页 面 中 普通 文本 (没有 链接 的 文本 ) 的 颜色 。 其 语法 结构 如 下 
所 示 。 


<body text=" 颜 色 值 "> 包含 的 内 容 部 分 </body> 
下 面 是 一 个 使 用 text 属性 的 实例 ， 其 代码 如 下 所 示 。 


NE ER body-text.html 


<!IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
入 "http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
06 ”<title> 赤 壁 怀古 </title> 
07 </head> 
08 <body bgcolor="#333333" text"#ffffff'> 
大 江东 去 ， 浪 淘 尽 , 千古 风流 人 物 。 故 垒 西边 ， 人 道 是 、 三 国 周 郎 赤壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 ， 卷 起 千 
堆 雪 。 江山 如 画 ， 一 时 多 少 豪杰 ! 
遥想 公 瑾 当年 ， 小 乔 初 嫁 了 ， 梭 姿 英 发 。 羽 扇 纶 巾 ， 谈 笑 间 、 档 榴 灰 飞 烟 灭 。 故国 神游 ， 多 情 应 笑 
我 ， 早 生 华 发 。 人 生 如 上 梦 ， 一 楼 还 酷 江 月 。 
09 </body> 
10 </html> 


在 实例 中 ， 定 义 了 背景 色 为 黑色 ， 文 字 的 颜色 为 。 EEEEEDEECOCTTOE EE 
ae 2 Ey ETT | 十 | 
白色 。 其 运行 后 的 显示 效果 ， 如 图 3-21 所 示 。 OO EE Gl Dm ims | “ 
<body> 元 素 的 边界 属性 用 来 定义 页 面 与 浏览 器 ie 
窗口 之 间 的 距离 。 边 界 属性 包括 两 个 属性 ，leftmargin 
和 topmargin 属性 。 
| BD 注意 
这 两 个 属性 都 是 正 浏览 器 所 专 有 的 。 如 
果 想 在 其 他 浏览 器 中 达到 一 致 的 显示 效果 ， 建 
议 使 用 级 联 样式 表 实现 。 


[LT TI cepter 


图 3-21 使 用 text 属性 后 的 显示 效果 


3.9.5 IE 浏览 器 中 的 左边 界 属性 leftmargin 


leftmargin 属性 用 来 指定 页 面 和 浏览 器 左边 界 之 间 的 距离 。 语 法 结构 如 下 所 示 。 
<body leftmargin=" 数 字 值 '> 包 含 的 内 容 部 分 </body> 
在 leftmarsin 属性 中 ， 取 值 用 数字 表示 ， 其 实际 单位 是 像素 。 示 例 代码 如 下 所 示 。 
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RR body-leftmargin.html 


01 <!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

03 <head> 

04 <meta http-equiv="Content-Type" content="text/html:; charset=gb2312" /> 
05 ”<title> 文 档 标题 </title> 

06 </head> 

07 <body leftmargin="0"> 

页 面 主体 中 的 内 容 

08 </body> 

10 <html> 


在 实例 中 ，07 行 定义 了 页 面 与 浏览 器 左 侧 的 距离 为 0。 运 行 后 ， 在 正 浏览 器 中 的 显示 效 


果 如 图 3-22 所 示 。 该 实例 在 Firefox 浏览 器 中 的 显示 效果 如 图 3-23 所 示 。 


马 文 档 标 题 - icrosoft Internet Explorer 于 口 | 
ETTRETTTETTTTRT TIETTOR TREE 


加 三 - 司 - DG Pm Ree 名 | | 
吊 相 加 ]n Wy oewments\o3\nti [有 到 
| 


页 面 主体 中 的 内 容 


文件 中 名 挤 (E) 查看 (V) 历史 (8) 书签 B) 工具 (T) 帮助) 
-DS- Do ne/ a ， 层 
页 面 主体 中 的 内 容 
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图 3-22 leftmargin 属性 取 值 为 0 的 效果 。 图 3-23 leftmargin 属性 取 值 为 0 时 Firefox 中 的 效果 


3.9.6 IE 浏览 器 中 的 上 边界 属性 topmargin 


topmargin 属性 用 来 指定 页 面 和 浏览 器 上 边界 之 间 的 距离 。 语 法 结构 如 下 所 示 。 
<body topmargin "数字 值 "> 包含 的 内 容 部 分 </body> 
在 topmargin 属性 中 , 数字 值 的 实际 单位 也 是 像素 。 下 面 是 topmargin 属性 的 实例 ， 其 代码 


如 下 所 示 。 
bk EA body-topmargin.html 
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<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
06 ”<title> 文 档 标题 </title> 


07 </head> 
08 <body topmargin="50"> 
页 面 主体 中 的 内 容 


在 实例 中 ，08 行 定义 了 页 面 与 浏览 器 左 侧 的 距离 为 50。 运 行 后 ， 在 正 浏览 器 中 的 显示 效 
果 如 图 3-24 所 示 。 该 实例 在 Firefox 浏览 器 中 的 显示 效果 如 图 3-25 所 示 。 


页 面 主体 中 的 内 容 


图 3-24 topmargin 属性 取 值 为 50 的 效果 图 3-25 topmargin 属性 取 值 为 50 时 Firefox 中 的 效 


3.9.7 ”未 访问 过 的 链接 属性 link 


页 面 主体 元 素 的 链接 属性 ， 用 来 定义 页 面 中 含有 链接 的 文本 的 颜色 。 链接 属性 中 包括 3 个 
属性 :link 属性 、vlink 属性 和 alink 属性 。 其 中 ， 每 个 值 对 应 着 链接 的 不 同 状态 。 
link 属性 用 来 指定 未 访问 过 的 链接 的 颜色 。 语 法 结构 如 下 所 示 。 


<body link =" 颜 色 值 "> 包含 的 链接 部 分 <body> 


01 <!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 ”<html xmlns="http:/wvww w3.org/1999/xhtml'> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
07 </head> 
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08 


09 
10 


<body link="#ccccce" > 

<a hre 人 ="#"> 含 有 链接 的 内 容 </a> 
</body> 

</html> 


该 实例 中 ，08 行 定义 链接 文本 的 颜色 为 浅 灰 色 。 其 运行 后 的 显示 效果 如 图 3-26 所 示 。 如 


果 取 消 link 属性 的 定义 ， 则 显示 效果 如 图 3-27 所 示 。 


3.9.8 


3-26 定义 link 属性 后 的 显示 效果 3-27 取消 link 属性 后 的 默认 效果 


已 访问 过 的 链接 属性 vlink 


vlink 属性 用 来 指定 已 访问 过 的 链接 的 颜色 。 语 法 结构 如 下 所 示 。 
<body vlink = "颜色 值 "> 包含 的 链接 部 分 </body> 


同样 ，vlink 属性 定义 的 文本 颜色 ， 也 只 对 含有 链接 的 文本 起 作用 。 下 面 是 一 个 使 用 vlink 
属性 的 实例 ， 其 代码 如 下 所 示 。 


例 程 3- 


Si body-vlink.html 


01 
02 
03 
04 
05 
06 
07 
08 


<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 文 档 标题 </title> 

</head> 

<body vlink="#CCCCCC" > 


<a hre 仁 "#> 含 有 链接 的 内 容 </a> 


09 
10 


<body> 
</html> 


该 实例 中 ，08 行 定义 已 经 访问 过 的 链接 文本 的 颜色 为 浅 灰 色 。 其 运行 后 ， 当 链接 被 访问 
后 的 显示 效果 ， 如 图 3-28 所 示 。 如 果 取 消 vlink 属性 的 定义 ， 则 显示 效果 如 图 3-29 所 示 。 
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D: My Docunents\03\lntitl e 


3-28 定义 vlink 属性 后 的 显示 效果 3-29 取消 vlink 属性 后 的 默认 效果 


3.9.9 “激活 的 链接 属性 alink 


alink 属性 用 来 指定 激活 的 链接 文本 的 颜色 , 如 在 已 访问 的 链接 上 按 下 鼠标 后 的 状态 等 。 其 
语法 结构 如 下 所 示 。 


<body alink "颜色 值 "> 包 含 的 链接 部 分 </body> 


同样 ，alink 属性 定义 的 文本 颜色 ， 也 只 对 含有 链接 的 文本 起 作用 。 下 面 是 一 个 使 用 alink 
属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 3-40| body-alink.html 


01 <!IDOCTYPE html PUBLIC "-/W3CWDTD XHTML 1.0 Transitional/EN" 
02 "http//www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
06 ”<tite> 文 档 标题 </title> 

07 </head> 

08 <body alink="#999999" > 

<a hre 全 "六 > 含有 链接 的 内 容 </a> 

09 </body> 

10 <mhtml> 


该 实例 中 ，08 行 定义 已 经 访问 过 的 链接 文本 的 颜色 为 灰色 。 其 代码 运行 后 ， 在 已 访问 链 
接 文本 上 ， 单 击 鼠 标 后 的 显示 效果 ， 如 图 3-30 所 示 。 如 果 取 消 alink 属性 的 定义 ， 则 显示 效果 
如 图 3-31 所 示 。 
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BE TT Sym 4 
图 3-30 定义 alink 属性 后 的 显示 效果 3-31 取消 alink 属性 后 的 默认 效果 


3.9.10 ”主体 元 素 中 使 用 样式 属性 style 


页 面 主体 元 素 的 样式 属性 ， 用 来 给 页 面 内 容 定义 级 联 样式 表 。 其 中 包括 style 属性 、class 
属性 。 下 面 进行 详细 讲解 。 
style 属性 用 来 定义 页 面 主体 元 素 中 使 用 的 级 联 样式 表 。 语 法 结构 如 下 所 示 。 


<body style=" 级 联 样式 表 "></body> 


关于 级 联 样式 表 的 语法 和 详细 内 容 ， 请 参见 本 书 第 11 章 。 下 面 通过 一 个 使 用 style 属性 的 
实例 。 其 代码 如 下 所 示 。 


| 例 程 3-41| body-style.html 
01 <!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 i gy I 
Transitional/EN" | 
02 
"http://www:w3.org/TR/xhtmll/DTD/xhtml1 -transitional.dtd"> 
03 ”<html xmlns="http://www.w3.org/1999/xhtml"> 大 江东 去 浪 淘 尽 ， 千 古风 流 人 物 。 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html; 


08 <body style="font-size:24px; font-weight:bold; 
Color:#666666:"> 

大 江东 去 浪 淘 尽 ， 千 十 风流 人 物 。 | ! 

人 到 

es 图 3-32 使 用 style 属性 的 显示 效果 


在 以 上 代码 中 , 08 行使 用 style 属性 定义 了 文本 的 字体 大 小 为 24 像素 , 字体 的 样式 为 加 粗 ， 
字体 的 颜色 为 灰色 。 其 运行 后 的 显示 效果 如 图 3-32 所 示 。 
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页 面 基 本 元 素 


3.9.11 主体 元 素 中 调用 样式 属性 class 


class 属性 用 来 调用 级 联 样式 表 。 使 用 class 属性 ， 既 可 以 调用 页 面 头 部 <style> 元 素 中 定义 
的 样式 表 ， 也 可 以 调用 使 用 <link> 元 素 链接 的 外 部 样式 表 。 其 语法 结构 如 下 所 示 。 


<body class=" 定 义 的 类 的 名 称 "></body> 
下 面 介绍 一 个 使 用 class 属性 的 实例 。 其 代码 如 下 所 示 。 


EA body-class.html 


<!IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
> "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
06 ”<title> 文 档 标题 </title> 
07 <link href="main.css" rel="stylesheet" /> 
08 </head> 
09 <body class="main.css"> 
页 面 内 容 部 分 ， 注 意 文本 的 显示 效果 。 
10 </body> 
11 <html> 


该 实例 中 ，09 行使 用 class 属性 调用 了 一 个 名 称 为 
main.css 的 外 部 级 联 样式 文件 。 在 main.css 中 定义 的 具体 
样式 如 下 所 示 。 

body{ 

background: #CCCCCC: 
color:#EEEEEE 


font-size:24px: 
font-weight'bold:} 


在 该 样式 中 ， 定 义 了 页 面 中 字体 的 颜色 为 白色 ,背景 sp 


DE 
颜色 为 灰色 ,字体 大 小 为 24 像素 ,字体 的 样式 为 加 粗 。 其 。 图 3.33 使 用 clacs 属性 的 显示 效果 
运行 后 的 显示 效果 如 图 3.33 所 示 。 


IRD WMD -a 
| ” 


| 十 下 国 [全 ny Deenenteoa\iot sini-et hinl 可 


3.10 | 使 用 背景 音乐 


页 面 中 添加 背景 音乐 的 元 素 是 <bgsound>， 其 中 包括 音乐 地 址 属性 srce、 重 复 属性 loop。 
<bgsound> 属 性 是 正 浏览 器 的 特有 属性 。 下 面 进行 详细 讲解 。 
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跟 我 学 HTML+CSS 


3.10.1 IE 浏览 器 中 添加 背景 音乐 元 素 <bgsound> 
<bgsound> 元 素 的 作用 是 : 制作 页 面 的 背景 音乐 。 其 语法 结构 如 下 所 示 。 


<bgsound 属性 =" 属 性 值 " 户 


下 面 是 使 用 <bgsound> 元 素 的 实例 。 其 代码 如 下 所 示 。 


We bysound.html 


<!IDOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<meta http-equiv="Content-Type" content="text/html:; charset=gb2312" /> 


<title> 赤 壁 怀 古 </title> 
</head> 
<body> 


大 江东 去 ， 浪 淘 ， 后 风 注 人物 故 垒 西边， 人道 是 、 


堆 雪 。 江山 如 画 ， 一 时 多 少 豪杰 ! 

</body> 

</html> 

该 实例 的 代码 运行 后 , 页面 会 播放 背景 音乐 。 背 
景 音乐 的 添加 ,对 页 面 的 显示 效果 并 无 影响 。 但 是 一 
般 背 景 音乐 的 大 小 会 比较 大 。 如 果 网 速 不 够 快 ， 可 能 
会 影响 第 一 次 播放 的 质量 , 所 以 最 好 选用 尽量 小 的 音 
乐 格式 。 添 加 背景 音乐 后 , 页 面 的 显示 效果 如 图 3-34 
所 示 。 


| 防 注意 
“并 不 是 所 有 浏览 者 都 喜欢 页 面 的 背 
景 音乐 。 采用 <bgsound> 元 素 添加 的 背景 
音乐 ， 用户 无 法 控制 ， 所 以 要 谨慎 使 用 。 


3.10.2 ”背景 音乐 的 路 径 属性 src 


三 国 周 郎 赤 壁 。 乱 石 穿 空 ， 惊 涛 拍 岸 ， 卷 起 千 


lx 
| 文件 中”“ 凡 辑 加 查看 外 收 三 的 工具 上) 和 助人 0 区 2 
Oa- ON | “ 
| 地址 0 | 各 n wy pocononts\o31intitlod-45 htl 可 国 转 到 | 角 挤 » 
大 江东 去 ， 浪 淘 尽 ,千古 风流 人 物 。 故 刍 西边 ， 人 道 看 


是 、 三 国 周 郎 亦 昱 。 二 惊 涛 拍 岸 ， 卷 起 干 堆 
雪 。 江山 如 画 ， 一 时 多 少 豪杰 


加 
Eg ml CA 加 


3-34 ”添加 背景 音乐 后 的 显示 效果 


src 属性 的 作用 是 : 指定 页 面 背景 音乐 的 路 径 。 其 语法 结构 如 下 所 示 。 


<bgsound src=" 背 景 音乐 的 路 径 " 亡 


在 <bgsound> 元 素 中 , 可 以 支持 多 种 音乐 格式 , 包括 常用 的 mp3、rm、wav 等 。 在 例 程 3-43 


中 已 经 使 用 ， 这 里 不 再 做 实例 演示 。 
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页 面 基本 元 素 


3.10.3 背景 音乐 的 重复 属性 loop 
loop 属性 指定 页 面 背景 音乐 的 播放 次 数 。 语 法 结构 如 下 所 示 。 
<bgsound sre- "背景 音乐 的 路 径 "loop-" 重 复 次 数 "> 


在 页 面 中 如 果 不 设 置 loop 属性 , 背景 音乐 会 不 停 地 重复 播放 。 在 例 程 3-43 中 已 经 使 用 loop 
属性 ， 这 里 不 再 做 实例 演示 。 


号 .了 了 | 本章 习题 


一 、 选 择 题 

1， 以 下 标记 符 中 ， 用 于 设置 页 面 标题 的 是 ( )。 

A.<title> B.<caption> C.<head> D.<html>。 

2. 以 下 标记 符 中 ， 没 有 对 应 的 结束 标记 的 是 ( )。 

A.<body> B.<br> C.<html> D.<title> 

3， 在 网 页 中 ， 必 须 使 用 ( “) 标 记 来 完成 超级 链接 。 

A.<a>...</a>  B.<p>...</p> C.<link>...</link> D.<>...AI> 

4. 若 要 循环 播放 背景 音乐 bgmid， 以 下 用 法 中 ， 正 确 的 是 ( )。 

A. <bgsound src="bg.mid" Loop="1"> 

B. <bgsound src="bg.mid" Loop=True> 

C. <sound src="bg.mid" Loop="True"> 

D. <Embed src="bg.mid" autostart=true></Embed> 

5. 若 要 在 网 页 中 插入 样式 表 main.css， 以 下 用 法 中 ， 正 确 的 是 ( 。 )。 

A. <Link href="main.css" type=text/css rel=stylesheet> 

B. <Link Src="main.css" type=text/css rel=stylesheet> 

C. <Link href="main.css" type=text/css> 

D. <Include hre 人 ="main.css" type=text/css rel=stylesheet> 

6. 若 要 在 当前 网 页 中 定义 一 个 独立 类 的 样式 myText, 使 具有 该 类 样式 的 正文 字体 为 Arial， 

字体 大 小 为 9pt， 行 间距 为 13.5pt， 以 下 定义 方法 中 ， 正 确 的 是 (。 )。 

A. <Style> 
.myText{Font-Familiy:Arial:Font-size:9pt:Line-Height:13.5pt} 
</style> 

B. myText{Font-Familiy:Arial:Font-size:9pt:Line-Height:13.5pt} 

C. <Style> 
myText{FontName:Arial:FontSize:9pt:LineHeight: 13.5pt} 
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</style> 

D. <Style> 
. myText{FontName:Arial:Font-ize:9pt:Line-eight:13.5pt} 
</style> 

二 、 填 空 题 


1. 文件 头 标签 也 就 是 通常 所 见 到 的 标签 。 

2. 创建 一 个 HTML 文档 的 开始 标记 符 是 ; 结束 标记 符 是 

3， 设 置 文档 标题 以 及 其 他 不 在 WEB 网 页 上 显示 的 信息 的 开始 标记 符 是 ; 结束 
标记 符 是 

4. 设置 文档 的 可 见 部 分 开始 标记 符 是 ; 结束 标记 符 是 

5. 网 页 标题 会 显示 在 浏览 器 的 标题 栏 中 ， 则 网 页 标题 应 写 在 开始 标记 符 和 结束 
标记 符 之 间 。 

6. 要 设置 一 条 1 像素 粗 的 水 平 线 ， 应 使 用 的 HIML 语句 是 

7. 要 设置 网 页 在 黑色 背景 下 显示 白色 文字 ， 应 使 用 语句 。 

8， 要 设置 一 条 1 像素 粗 、200 像素 长 的 左 对 齐 的 水 平 线 ， 应 使 用 “语句 。 


三 、 实 战 练习 
1. 使 用 链接 路 径 属 性 href 链接 图 片 ， 可 以 使 用 自己 电脑 的 图 片 ， 也 可 以 使 用 网 络 图 片 。 


2， 使 用 样式 元 素 <style> 修 饰 页 面 的 文字 样式 ， 熟 悉 其 中 各 个 属性 的 意义 。 
3， 制 作 一 个 页 面 ， 并 添加 自己 喜欢 的 音乐 。 


文本 和 有 段 洛 元 素 


网 页 中 的 信息 主要 通过 文本 内 容 (同时 辅助 适当 的 图 片 和 多 媒体 ) 进 行 传递 。 所 以 文本 内 容 
显示 的 效果 ， 是 决定 网 页 成 功 与 否 的 关键 。 合 理 地 使 用 文本 元 素 和 相关 属性 ， 可 以 大 大 提高 内 
容 的 可 阅读 性 ， 使 制作 的 页 面 更 有 亲和力 。 


全 、 本章 主 要 内 容 有 : 


用 段落 文本 的 层 元 素 控制 段落 文本 的 对 齐 、 显 示 位 置 ， 样 式 等 。 

@ 用 文本 标题 元 素 控 制 标题 文本 的 大 小 、 加 粗 方式 等 。 

@ 用 文本 中 文字 格式 的 元 素 控制 内 容 中 文字 的 显示 大 小 ， 显 示 方式 等 。 
@ 用 文本 的 换行 、 格 式 和 间隔 的 元 素 分 隔 文本 内 容 ， 或 者 设置 文本 格式 。 


4.7 | 层 元 素 <div> 


在 页 面 中 层 元 素 <div> 用 来 将 页 面 内 容 分 割 成 各 个 独立 的 部 分 。 在 每 个 <div> 元 素 中 ， 不仅 
可 以 包含 文本 内 容 ， 也 可 以 包含 图 片 、 表 单 等 其 他 内 容 。 在 默认 的 情况 下 ，<div> 元 素 所 包含 
的 内 容 ， 将 在 新 的 一 行 显示 。 其 语法 结构 如 下 所 示 。 


下 面 是 一 个 使 用 <div> 元 素 的 实例 。 其 代码 如 下 所 示 。 


Lm div.html 
01 <!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional/EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06 ”<tile> 层 元 素 </title> 
07 </head> 


08 <body> 

上 面 是 层 元 素 以 外 的 文本 

09 ”<div> 这 里 是 层 元 素 的 内 容 部 分 </div> 
注意 层 元 素 元 素 以 外 的 文本 的 显示 方式 。 
10 </body> 

11 </html> 


该 实例 中 ， 在 09 行 中 插入 了 一 个 <div> 元 素 。 由 于 <div> 元 素 的 插入 ， 被 分 隔 的 文本 将 不 
能 与 <div> 元 素 同行 显示 。 其 运行 后 的 显示 效果 ， 如 图 4-1 所 示 。 


二 导 元素 - 


上 面 是 层 元 素 以 外 的 文本 
这 里 是 层 元 素 的 内 容 部 分 。 
注意 层 元 素 元 素 以 外 的 文本 的 显示 方式 。 


BEZEL 
图 4-1 <div> 元 素 的 默认 显示 效果 


<div> 元 素 中 可 以 使 用 的 所 有 属性 如 表 4-1 所 示 。 


文本 显示 方向 属性 


文本 和 段落 元 素 


表 4-1 <div> 元 素 的 所 有 属性 
属性 代码 


指定 语言 属性 


类 属性 


定义 级 联 样式 属性 


对 齐 属性 


标题 属性 


取消 自动 换行 属性 


标记 属性 


4.1.1 


标记 属性 id 


id 属性 的 作用 可 以 分 为 两 个 方面 。 其 一 也 是 最 主要 的 作用 是 用 来 标记 元 素 ， 也 就 是 给 元 素 
定义 唯一 的 标识 ， 方 便 在 元 素 中 使 用 行为 。 另 一 个 作用 是 类 似 class 属性 的 作用 ， 用 来 调用 级 
联 样式 表 。 其 语法 结构 如 下 所 示 : 


<div id=" 定 义 的 名 称 ">…*…</div> 
下 面 是 一 个 使 用 id 属性 的 实例 。 其 代码 如 下 所 示 。 


Ws div-id.html 


<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title>id 属性 的 应 用 </title> 

<link href="main.css" rel="stylesheet" type="text/css" /> 


font-size:26px: 
font-style:italic:} 
</style> 
</head> 
</html> 


该 实例 中 ,07 行 中 调用 了 一 个 名 称 为 main.css 的 外 部 样式 文件 ,在 这 个 调用 的 样式 文件 中 ， 
具体 定义 的 样式 内 容 的 代码 如 下 所 示 。 


body{ 


width:200px: 
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height: 100px; 
border:6px solid #00FFO00:; 
font-size:26px: 
font-style:italic;} 
| 户 注 章 i 
i 中 二 样 开 写 冰 上 上 Er TIE TIRCTE7 TO i 
使 用 这 属 性 调用 的 样式 , 其 写法 与 EE 
class 属性 调用 的 样式 的 选择 符 有 所 区 EECETII SEE 
别 。 要 在 样式 前 加 “#?” 号 (关于 选择 符 下 


下 
的 具 依 内 容 ， 请 参看 第 12 章 ) 


在 该 样式 中 ， 定 义 的 元 素 的 宽度 为 200 像素 ， 高 度 

为 100 像素 ,边框 为 绿色 实 线 ,字体 大 小 为 26 像素 ， 文 ”es 同居 局 记 局 训 we 

本 样式 为 斜体 。 代 码 运行 后 ， 其 显示 效果 如 图 4-2 所 示 。 ” 图 42 定义 style 属性 后 的 <div> 元 素 
关于 这 属性 的 另 一 个 作用 ， 将 在 第 18 章 中 进行 讲解 。 


四 


4.1.2 调用 样式 属性 class 


class 属性 用 来 在 元 素 中 调用 级 联 样式 表 。 与 body 中 的 class 属性 的 区 别 在 于 属性 的 作用 范 
围 不 同 。 其 原因 在 于 部 分 样式 表 属 性 具有 继承 性 (关于 样式 的 继承 性 ， 请 参看 第 12 章 )。 


| 忆 注意 


了 在 <div> 元 素 中 ， 用 来 控制 元 素 表现 的 属性 很 少 ， 甚 至 不 能 定义 元 素 的 高 度 和 宽 
度 。 所 以 要 使 用 级 联 样式 表 来 控制 其 表现 。 


语法 结构 如 下 所 示 : 
<div class=" 定 义 的 类 的 名 称 ">*……</div> 


class 属性 中 使 用 的 样式 , 既 可 以 是 页 面 中 <style> 元 素 中 定义 的 样式 , 也 可 以 是 从 外 部 文件 
中 调用 的 样式 。 建议 使 用 外 部 调用 的 样式 。 下 面 是 一 个 使 用 class 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb div-class.html 


01 <!DOCTYPE html PUBLIC"-/W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

06 ”<title> 文 档 标题 </title> 

07 </head> 

08 <body> 

09 <divclass="content"> 
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页 面 内 容 部 分 。 
10 <div> 


11 </body> 
12 </html> 


该 实例 中 ，07 行 调用 了 一 个 名 称 为 main.css 的 外 部 样式 文件 。 在 这 个 调用 的 样式 文件 中 ， 
具体 定义 的 样式 内 容 如 下 所 示 。 


width:150px; 
height:90px: 
border:6px solid #333333; 
background:#3366FF; 
color:#CCCCCC:; 
font-size:20px: 
font-style:italic;} 


在 该 样式 中 ， 定 义 的 元 素 的 宽度 为 150 像素 ， 高 。 EEE 
度 为 90 像素 ,边框 为 深 亦 色 实 线 ,背景 蓝 色 , 文本 浅 加 大 2 人 全 汐 | 全 | 
灰色 ,字体 大 小 为 20 像素 的 斜体 字 。 代 码 运行 后 ,其 。 jaaJSs ww 可 四 Wa | "mat 国 呈 | 
显示 效果 如 图 4-3 所 示 。 

从 图 4.3 可 以 看 出 ， 通 过 级 联 样式 表 ， 可 以 控制 
元 素 的 所 有 显示 属性 。 所 以 在 HTML 标准 中 , 推荐 使 
用 样式 表 ， 实 现 页 面 结构 和 表现 相 分 离 。 


4.1.3 创建 样式 属性 style 图 4.3 定义 class 属性 后 的 <div> 元 素 


style 属性 用 来 在 元 素 中 定义 级 联 样式 表 。 其 与 class 属性 的 区 别 在 于 ， 使 用 style 属性 定义 
的 样式 的 优先 级 ， 高 于 class 属性 调用 的 样式 (关于 级 联 样式 表 中 的 优先 级 的 详细 内 容 ， 请 参看 
第 12 章 )。 语 法 结构 如 下 所 示 。 


<div style=" 定 义 的 样式 ">……</div> 


下 面 通过 一 个 实例 ， 演 示 当 class 属性 使 用 外 部 调用 的 级 联 样式 表 时 ， 页 面 的 显示 效果 。 
其 代码 如 下 所 示 。 


div-style.html 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://Wwww.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 
06 ”<title> 样 式 属性 </title> 
07 <div style=" width:300px; height:150px:border:6px solid #000033; font-size:28px: 
text-decoration:line-through:"> 
注意 页 面 的 显示 图 像 。 
08 </div> 
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09 </body> 

10 <htm> 

其 中 07 和 08 之 间 的 内 容 是 样式 属性 , 在 该 样式 中 ， 0 
定义 的 元 素 的 宽度 为 300 像素 ， 高 度 为 150 像素 ， 边 框 。 ee Ty] Ca 
为 深蓝 色 实 线 , 字体 大 小 为 26 像素 ,文本 修 包 为 册 除 线 。 下 加 了 中 met 
代码 运行 后 ， 其 显示 效果 如 图 4-4 所 示 。 


4.1.4 ”对 齐 属性 align 


对 齐 属性 用 来 定义 内 容 的 水 平 对 齐 方式 。 使 用 对 齐 
属性 ， 不 仅 可 以 控制 文本 内 容 的 对 齐 ， 也 可 以 控制 文本 
中 图 片 等 内 容 的 对 齐 。 语 法 结构 如 下 所 示 。 


<div align=" 水 平 对 齐 方式 "> 包含 的 内 容 部 分 </div> 
对 齐 属 性 align 可 以 取 4 个 值 ， 其 每 个 值 的 具体 含义 如 表 4-2 所 示 。 


周 寺 TT emer 


图 4-4 定义 style 属性 后 的 <div> 元 素 


表 4-2 区 域 元 素 对 齐 属性 的 取 值 及 含义 


元 素 中 内 容 靠 元 素 左 侧 对 齐 (默认 值 ) 


元 素 中 内 容 靠 中 间 对 齐 
元 素 中 内 容 靠 元 素 右 侧 对 齐 
元 素 中 内 容 靠 元 素 两 端 对 齐 


下 面 是 一 个 使 用 align 属性 的 实例 。 其 代码 如 下 所 示 。 
div-align.html 


<!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 

2 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<title>align 属性 </title> 
07 </head> 
08 <body> 
09 -<div align="right"> 

这 里 是 align 元 素 的 内 容 部 分 

<br 亡 

的 一 段 内 容 
10 <div> 
11 </body> 
12 <htm> 


说 明 
下 “因为 <div> 元 素 中 没有 宽度 和 高 度 属性 ， 所 以 为 了 显示 右 对 齐 的 效果 ， 在 代码 中 
使 用 了 <br> 元 素 。<br> 元 素 的 含义 是 ， 使 文本 在 分 隔 处 换行 显示 (关于 <br> 元 素 的 详细 
内 容 ， 请 参见 4.4.1 节 )。 


该 实例 中 ，09 行 在 对 齐 属性 中 使 用 了 right 值 ， 目 的 是 使 其 中 的 内 容 靠 右 侧 对 齐 。 其 运行 
后 的 显示 效果 ， 如 图 4-5 所 示 。 

在 对 齐 属性 的 4 个 值 中 ，justify 值 较为 特殊 。 因 为 到 目前 为 止 ， 还 没有 任何 浏览 器 支持 此 
属性 值 ， 所 以 使 用 justify 值 时 ， 内 容 会 以 左 对 齐 的 方式 显示 。 下 面 是 align 属性 中 使 用 justify 
值 的 实例 ， 其 代码 如 下 所 示 。 


div-align-justify.html 
<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06 ”<title>align 属性 </title> 
07 </head> 
08 <body> 
这 里 是 align 属性 元 素 的 内 容 部 分 <br 忆 另 一 段 内 容 
10 </div> 


11 </body> 
12 <div> 


14 </html> 


09 行 中 使 用 了 justify 属性 ， 该 代码 运行 后 ， 显示 效果 如 图 4-6 所 示 。 


4-5 对齐 属性 取 值 为 right 时 的 显示 效果 4-6 对 齐 属性 取 值 为 justity 时 的 显示 效果 


在 HIML 中 ， 并 不 建议 使 用 align 属性 控制 内 容 的 对 齐 。 推 荐 的 方法 是 ， 使 用 样式 表 控制 
内 容 的 对 齐 。 


65 


跟 我 学 HTML+CSS 


4.1.5 ”取消 自动 换行 属性 nowrap 


nowrap 属性 用 来 使 文本 内 容 同行 显示 。 在 XHTML 中 文本 的 默认 显示 方式 是 ， 忽 略 掉 文 
本 中 “ 回 车 键 ”的 换行 符 ， 根 据 元 素 的 宽度 进行 自动 换行 显示 。 使 用 nowrap 属性 可 以 改变 这 
种 显示 方式 ， 使 文本 遇 到 “ 回 车 键 ” 的 换行 符 时 换行 显示 。 语 法 结构 如 下 所 示 。 


<div nowrap= "nowrap'">……</div> 


nowrap 属性 没有 值 ， 在 HTML 中 使 用 自身 名 称 作为 值 。 因 为 大 多 数 浏览 器 都 不 支持 该 属 
性 ， 所 以 就 不 做 实例 演示 了 。 


4.1.6 ”标题 属性 tile 


title 属性 用 来 设 定 当 鼠 标 悬 停 在 文本 内 容 上 时 ， 所 显示 的 内 容 。 通 过 title 属性 ， 可 以 给 文 
本 添加 注释 等 。 目 前 大 多 数 浏览 器 并 不 支持 该 属性 ， 只 有 正 浏览 器 可 以 支持 该 属性 。 其 语法 
结构 如 下 所 示 。 


<divtitle= "标题 内 容 ">……</div> 
下 面 是 一 个 使 用 title 属性 的 实例 。 其 代码 如 下 所 示 。 


Wm div-title.html 
01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
02 "http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<title> 文 档 标题 </title> 
07 </head> 
08 <body> 
09 ”<div tile=" 内 容 部 分 的 帮助 等 内 容 "> 页 面 内 容 部 分 。</div> 
10 </body> 
11 </body> 
12 <htm> 


其 代码 运行 后 ， 鼠 标 悬 停 在 文本 内 容 上 时 ， 页 面 中 会 出 现 “ 内 容 部 分 的 帮助 等 内 容 ” 的 名 
子 。 在 下 浏览 器 中 的 显示 效果 ， 如 图 4.7 所 示 。 


加 
ET 
Om- OA er Km “| 
地 HID) ejF:wenm 韦 神 古 z] 加 | | “|@@ea 朵 | 


页 面 内 容 部 分 。 加 


型 


BE I EE 


图 4-7 使 用 tite 属性 后 的 显示 效果 
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04 


一 


4.2 标题 元 素 


标题 元 素 用 来 定义 内 容 的 标题 。 其 中 包括 6 个 元 素 ， 分 别 是 <hl>、<h2>、<h3>、<h4>、 
<h5> 和 <h6>， 它 们 分 别 对 应 6 种 显示 效果 。 以 <h1> 元 素 为 例 ， 语 法 结构 如 下 所 示 。 


01 <!IDOCTYPE html PUBLIC"-/W3C/DTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<title> 唐 诗 </title> 

07 </head> 


<body> 
<hl> 无 题 <hl> 
<h2> 李 商 隐 </h2> 
<h3> 昨 夜 星辰 昨夜 风 </h3> 
<h4> 画 楼 西 昱 桂 堂 东 </h4> 
<h5> 身 无 彩 凤 双飞 翼 </h5> 
<h6> 心 有 灵犀 一 点 通 </h6> 


该 实例 的 主体 元 素 中 ， 在 08 和 09 行 之 间 定 义 了 6 个 <h> 元 素 。 其 运行 后 的 显示 效果 ， 如 
图 4-8 所 示 。 


昨夜 星 展 昨夜 风 


画 楼 西 畔 桂 堂 东 
身 无 条 风 双 飞 可 


十 有 灵 大 一 所 古 


4-8 6 个 <h> 元 素 的 默认 显示 效果 


从 图 4-8 可 以 看 出 ， 使 用 标题 元 素 时 ， 上 下 元 素 之 间 会 分 隔 开 一 段 距离 。 标 题 元 素 中 可 以 
使 用 的 所 有 属性 如 表 4-3 所 示 。 
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表 4-3_ 标 题 元 素 的 所 有 属性 
属性 名 称 代码 写法 


文本 显示 方向 属性 


指定 语言 属性 


类 属性 


定义 级 联 样式 属性 


对 齐 属性 


标题 属性 


标记 属性 


在 标题 元 素 可 以 包含 所 有 内 联 元 素 ， 包 括 <a>、<img>、<strong> 等 。 在 标题 元 素 中 使 用 块 
元 素 ， 由 于 浏览 器 的 容错 性 ， 一 般 可 以 正常 显示 。 

页 面 中 文本 显示 的 大 小 是 受到 浏览 器 的 影响 的 。 不 但 标题 元 素 是 如 此 ， 包 括 前 面 讲解 的 
<div> 元 素 和 <p> 元 素 ， 以 及 <body> 元 素 中 的 文本 都 会 受到 浏览 器 设置 的 影响 。 如 果 要 使 文本 大 
小 固定 不 变 ， 可 以 使 用 级 联 样 式 表 实现 。 下 面 是 一 个 使 用 标题 元 素 的 实例 。 其 代码 如 下 所 示 。 


Wa h-use.html 


01 <!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
02 "http:/www.w3.org/TR/xhtmll/DTD/xhtml1-transitional.dtd"> 
03 <html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
06 ”<title> 唐 诗 </title> 
07 </head> 
08 <body> 
09 ”<div> 层 元 素 中 的 文本 </div> 
10” <p> 段落 元 素 中 的 文本 </p> 
<hl> 无 题 <hl> 
<h2> 李 商 隐 </h2> 
<h3> 昨 夜 星 展 昨夜 风 </h3> 
<h4> 男 楼 西 昱 桂 堂 东 </h4> 
<h5> 身 无 彩 凤 双飞 辟 <h5> 
<h6> 心 有 灵犀 一 点 通 <h6> 
11 </body> 
12 </html> 


该 实例 中 , 分 别 在 已 经 讲解 的 各 种 标题 元 素 中 定义 了 文本 。 下 面 讲解 下 浏览 器 关于 字体 显 
示 大 小 的 相关 设置 (以 下 6.0 为 例 )。 在 正 6.0 的 主 菜单 栏 中 ， 单 击 “ 查 看 ” |“ 文字 大 小 ”命令 ， 
显示 如 图 4-9 所 示 的 下 拉 菜 单 。 在 下 拉 菜 单 中 选择 “最 大 ”命令 , 此 时 文本 的 显示 效果 如 图 4-10 
所 示 。 选 择 “ 最 小 ”命令 ， 此 时 文本 的 显示 效果 如 图 4-11 所 示 。 
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图 4-9 


层 元 素 中 的 文本 
段落 元 素 中 的 文本 


机 


浏览 器 中 文字 大 小 的 设置 图 4-10 定义 文字 大 小 为 “最 大 ” 4-11 定义 文字 大 小 为 “最 小 ” 


4.3 | 段落 元 素 <p> 


段落 元 素 <p> 用 来 定义 一 个 段落 。 在 <p> 元 素 中 ， 可 以 包含 文本 、 图 片 ， 以 及 用 来 修饰 文 
本 的 元 素 ， 如 <strong> 元 素 等 。 和 <div> 元 素 一 样 ， 被 <p> 元 素 包含 的 内 容 ， 默 认 的 显示 方式 是 
换行 显示 。 语 法 结构 如 下 所 示 。 


下 面 是 一 个 使 用 <p> 元 素 的 实例 。 其 代码 如 下 所 示 。 


01 


10 
11 


<!IDOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll -transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 段 落 元 素 的 应 用 </title> 

</head> 

<body> 

段落 元 素 以 外 的 文本 显示 方式 

<p> 这 里 是 段落 元 素 的 内 容 部 分 <p> 

注意 段落 元 素 以 外 的 文本 的 显示 方式 。 


<body> 
</html> 
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该 实例 中 ， 在 09 行 中 插入 了 一 个 <p> 元 素 。 由 于 <p> 
元 素 的 插入 ， 被 分 隔 的 文本 ， 将 不 能 与 <p> 元 素 同行 显示 。 ”| 轧 旦 -加 : 习 上 ol 9 
其 运行 后 的 显示 效果 ， 如 图 4-12 所 示 。 Oe 

从 图 4-12 可 以 看 出 ，<p> 元 素 和 <div> 元 素 在 显示 上 | ee 人 
的 区 别 。 使 用 <div> 元 素 包含 的 内 容 ， 和 元 素 外 分 隔 的 文本 注意 眉 落 元 素 以 外 的 文本 的 里 示 方式。 
之 间 是 不 存在 距离 的 。 而 使 用 <p> 元 素 时 会 使 各 行 之 间 分 


到 
隔 开 一 段 距离 。<p> 元 素 中 可 以 使 用 的 所 有 属性 如 表 44 。 生生 
所 示 。 图 4-12 <p> 元 素 的 默认 显示 效果 

表 44 <p> 元 素 的 所 有 属性 
属性 名 称 写 法 

文本 显示 方向 属性 本 
指定 语 计 必 Im 
类 属性 Be 
定义 级 联 样式 性 we 
于 刘 性 a 
标题 属性 
标记 属性 呈 


ee 文本 的 间隔 和 布局 


文本 的 间隔 和 布局 主要 是 指 : 在 页 面 中 用 来 区 分 文本 内 容 的 元 素 ， 还 有 控制 内 容 显示 方式 
的 元 素 。 其 中 包括 <br>、<pre> 等 元 素 。 其 具体 用 法 如 下 所 示 。 


4.4.1 换行 元 素 <br> 


换行 元 素 <br> 用 来 使 被 分 隔 的 文本 换行 显示 。 语 法 结构 如 下 所 示 。 
<br 户 


下 面 是 使 用 <br> 元 素 的 实例 。 其 代码 如 下 所 示 。 


从 本 节 以 后 ， 本 书 只 写 出 主要 的 代码 ， 大 家 运行 的 时 候 请 注意 。 
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例 程 4-11 国 .au 


01 <body> 文件 吧 ”篇 竹中 查看 WD 收藏 @。 工具 四) | E32 
无 题 <br 放 李商隐 <br 人 春蚕 到 死 丝 方 尽 <br 记 蜡 炬 成 灰 。 | 回 - 刁 -天 史 | 站 于 4 
泪 始 干 地 址 中 有 ]? wr >] 固 和 到 全 六 ” 屋 smeit 国 过 
02 </body> 无 下 全 
李商隐 
a 者 要 到 死 丝 方 尽 
代码 <br 人 运行 后 ， 虽 然 写 在 一 行 , 但 是 它们 在 页 面 换 。 | 钳 碟 记 灰 担 始 二 
自动 换行 。 显 示 效 果 如 图 4-13 所 示 。<br> 元 素 中 可 以 使 用 


的 所 有 属性 ， 如 表 4-5 所 示 。 


SE CT mm 


表 4-5 ”<br> 元 素 的 所 有 属性 图 4-13 使 用 <br> 元 素 的 显示 效果 


属性 名 称 A 
清除 属性 clear 
类 属性 class 
定义 级 联 样式 属性 style 
标记 属性 id 
标题 属性 title 


<br> 元 素 里 还 有 一 个 最 重要 的 属性 ， 就 是 清除 属性 clear，clear 属性 用 来 使 被 分 隔 的 文本 
不 能 与 其 他 元 素 同行 显示 。 例 如 , 在 文本 的 某 一 侧 含 有 图 片 或 者 其 他 元 素 , 当 换 行 符 中 使 用 clear 
属性 时 ， 换 行 后 的 文本 将 在 图 片 或 者 其 他 元 素 的 下 面 显示 。 语 法 结构 如 下 所 示 。 

<br clear=" 属 性 值 " /> 


clear 属性 可 以 使 用 3 个 值 ， 其 具体 含义 如 表 4-6 所 示 。 


表 4-6 _clear 属性 的 取 值 及 含义 


属 性 值 代表 的 含义 
left 清除 左 侧 元 素 
all 清除 两 边 元 素 
right 清除 右 侧 元 素 
和 不 清除 元 素 
下 面 是 使 用 <br> 元 素 的 clear 属性 的 实例 .其 代码 如 下 所 示 。 EE -元 四 E 到 
Esp re el | 
WE br-clear.html i 
< > 00 
胡 全 入 全 Bai 作 百度 
align="left' alt="logo" 广 文本 内 容 <br clear="left" 广 换 行 符 分 隔 后 的 文本 。 
03 </body> 换行 符 分 隔 后 的 文本 - 
其 代码 运行 后 ， 显 示 效 果 如 图 4-14 所 示 。 在 该 实例 中 ， 
02 行 中 <img> 元 素 定义 了 相应 的 对 齐 属 性 , 关于 <img> 元 素 的 。 IE 后 古 后 民 FREE 
详细 内 容 请 参看 第 6 章 。 图 4-14 使 用 clear 属性 的 显示 效果 
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4.4.2 ” 缩 进 元 素 <blockquote> 


缩 进 元 素 <blockquote> 用 来 使 包含 的 内 容 从 文本 中 分 离 出 来 ， 同 时 首尾 缩 进 显示 。 语 法 结 
构 如 下 所 示 。 


<blockquote>……</blockquote> 


下 面 是 使 用 <blockquote> 元 素 的 实例 。 其 代码 如 下 所 示 。 
blockquote html 


01 <body> 加 
| 文件 加 绩 给 四 查看 山 ， 收 牙 由 工具 Ci”| 及 


唐诗 是 我 国 历史 文化 的 最 优秀 部 分 <blockquote> 唐 代 是 我 国 四 品 a 

封建 社会 中 经 济 政治 高 度 发 展 的 第 一 个 高 峰 </blockquote> 从 而 除 i 

了 一 批 优秀 的 诗人 EECET EE 
02 </body> 唐诗 是 我 国 历史 文化 的 最 优秀 部 分 


唐 民 是 我 国 封建 社会 中 经 济 政 治 高 
这 是 一 段 比较 长 的 文本 内 容 ， 注 意 文本 中 缩 进 元 素 度 发 展 的 第 一 个 吉 蜂 

<blockquote> 所 包含 的 内 容 的 显示 方式 ， 显 示 效 果 如 图 。 | 人 除了- 兹 优 和 的 诗人 

4-15 所 示 。 周二 让 让 丰 厂 丰 ce 3 
<blockquote> 元 素 中 可 以 使 用 的 所 有 属性 如 表 4-7 图 4-15 使 用 <blockquote> 元 素 的 显示 效果 

所 示 。 


表 4-7 <blockquote> 元素 的 所 有 属性 


属性 名 称 代码 写法 

文本 显示 方向 属性 dir 

指定 语言 属性 lane 
类 属性 class 
定义 级 联 样式 属性 le 
标记 属性 id 

标题 属性 title 
引用 地 址 属性 cite 


4.4.3 保留 格式 元 素 <pre> 


保留 格式 元 素 <pre> 用 来 使 包含 的 内 容 按照 文档 源 代 码 的 格式 显示 。 因 为 浏览 器 的 默认 显 
示 方 式 中 ， 将 压缩 多 个 空格 为 一 个 ， 同 时 忽略 换行 等 空白 符号 。 其 语法 结构 如 下 所 示 。 


下 面 是 使 用 <pre> 元 素 的 实例 。 其 代码 如 下 所 示 。 


例 程 4-14 pre.html 


01 <body> 


Ta 


02 ”<pre> 注 意 页 面 的 显示 方式 


无 题 
唐 李商隐 </pre> 
03 </body> 


代码 运行 后 ， 显 示 效 果 如 图 4-16 所 示 。 


古旧 -中 回信 | 有 P 凌 
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习 格 式 元 素 pre - Wicrosoft TntersetY01 [= 
文件 中 ”编辑 E) 查看 WW 收 训 和 ) 工具 DJ ?> 震 


» 


地 址 W) 2]n.wy] 园 到 | 链接 ” 刁 smeit 图 过 


<pre> 元 素 中 可 以 使 用 的 所 有 属性 如 表 4-8 所 示 。 


文本 显示 方向 属性 
指定 语言 属性 


类 属性 


定义 级 联 样式 属性 
标记 属性 
标题 属性 
宽度 属性 


站 习 
李商隐 
BE 引 
图 4-16 使 用 <pre> 元 素 的 显示 效果 
表 4-8_<pre> 元 素 的 所 有 属性 
属性 名 称 写 法 
dir 
lang 
class 
style 
1d 
title 
width 


4.4.4 ”取消 换行 元 素 <nobr> 
取消 换行 元 素 <nobr> 用 来 使 被 包含 的 文本 同行 显示 。 其 语法 结构 如 下 所 示 。 


下 面 是 使 用 <nobr> 元 素 的 实例 。 其 代码 如 下 所 示 。 


bE nobr.html 


01 


<head> 


<meta http-equiv="Content-Type" content="text/htmil: charset=—utf-8" /> 


<title> 唐 诗 </title> 
<style> 


content{ 
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09 <div class="content"><nobr> 注 意 页 面 内 容 的 显示 方式 。 白 日 依 山 尽 ， 黄 河 入 海流 < nobr></div> 
11 </html> 


在 该 实例 中 ，09 行 中 使 用 了 <div> 元 素 ， 并 且 通 过 调用 级 联 样 式 表 ， 定 义 其 宽度 为 260 像 
素 ， 高 度 为 130 像素 ， 边 框 为 深 灰 色 实 线 。 目 的 是 使 <nobr> 元 素 的 文本 效果 显示 得 更 明显 。 其 
代码 运行 后 ， 所 有 的 文字 都 不 会 换行 ， 显 示 效 果 如 图 4-17 所 示 。 如 果 取 消 <nobr> 元 素 ， 其 代码 
运行 后 ， 显 示 效 果 如 图 4-18 所 示 。 


原 厂 厂 厂 厂矿 Wy cnr 


图 4-17 使 用 <nobr> 元 素 的 显示 效果 图 4-18 取消 <nobr> 元 素 的 显示 效果 


<nobr> 元 素 中 ， 不 含有 任何 属性 。 


4.4.5 引用 元 素 <q> 


引用 元 素 <q> 用 来 在 内 容 中 定义 一 段 引 用 的 文本 。 由 于 各 个 浏览 器 对 该 属性 支持 情况 不 同 ， 
在 不 同 的 浏览 器 中 ， 可 能 会 有 不 同 的 显示 效果 。 语 法 结构 如 下 所 示 。 


下 面 是 使 用 <q> 元 素 的 实例 。 其 代码 如 下 所 示 。 


01 <body> 
在 这 个 页 面 中 ， 注 意 引用 <q> 大 江东 去 浪 淘 尽 </q> 中 内 容 的 显示 方式 。 

02 </body> 

其 代码 运行 后 , 在 正 浏览 器 中 的 显示 效果 如 图 4-19 所 示 。 在 Firefox 浏览 器 中 的 显示 效果 
如 图 4-20 所 示 。 
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本 引用 元 未 - Nicrosoft Internet ER oO 
文件 ”六 辑 如 ”查看 W 路 戈 ) 工具 1” 


11a Firefor . 


| 文件 四 查看 历史 GG) 书签 @ 工具 人 0 
四 起- 加 -站 加 种 | 彤 由 “RANGLE 
地 址 ” 链接 ”” i 

加 n ww 可 目 于 | 民 smat 国志 ET 


人 注意 引用 大 江东 去 浪 淘 尽 中 内 EF | 中 引用 元 素 + [- 
A 在 这 个 页 面 中 ， 注 意 引 用 “大 江东 去 浪 淘 尽 ” 
中 内 容 的 显示 方式 。 
i 上 
GE nl ll CZ 


图 4-19 ”使 用 <q> 元 素 在 正 中 的 显示 效果 图 4-20 ”使 用 <q> 元 素 在 Firefox 中 的 显示 效果 


从 图 4-19 和 图 4-20 可 以 看 出 ， 在 Firefox 浏览 器 中 被 <q> 元 素 包含 的 文本 ， 会 显示 在 “ 引 
号 ”之 中 ， 而 在 下 浏览 器 中 没有 特殊 的 显示 效果 。<q> 元 素 中 可 以 使 用 的 所 有 属性 ， 如 表 4-9 


表 4-9 <q> 元 素 的 所 有 属性 


属性 名 称 SIA 

文本 显示 方向 属性 dir 

指定 语言 属性 lang 
类 属性 class 
定义 级 联 样式 属性 style 
标记 属性 id 

标题 属性 title 
引用 地 址 属性 cite 


其 中 cite 属性 ， 用 来 指定 <q> 元 素 内 容 的 引用 地 址 ， 目 前 为 止 还 没有 任何 效果 。 


4.4.6 地址 元 素 <address> 


地 址 元 素 <address> 用 来 在 内 容 中 定义 地 址 的 相关 内 容 。 在 常用 的 浏览 器 中 , 会 将 <address> 
元 素 所 包含 的 内 容 用 斜体 显示 。 语 法 结构 如 下 所 示 。 


下 面 是 使 用 <address> 元 素 的 实例 。 其 代码 如 下 所 示 。 


address.html 
01 <body> 
02 ”<address>Email:hao123@126.com<br /> 
地 址 : 北京 市 <br /> 
电话 : 000000000</address> 
03 </body> 
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02 行 中 使 用 了 地 址 属性 。 其 代码 运行 后 ， 显 示 效 果 如 图 4-21 所 示 。 


Er MC ED TIRE 
国 开 -上 日 -由 回扣 | 用 时 引 


EREETE [EC 


Bmail:haol23@126.com 
区 站 北 让 六 
应声 : 000000000 


到 加 天国 天 国 FEIXO 


4-21 ”使 用 <address> 元 素 的 显示 效果 
<address> 元 素 中 可 以 使 用 的 所 有 属性 ， 如 表 4-10 所 示 。 


表 4-10 ”<address> 元 素 的 所 有 属性 


代码 写法 属性 名 称 
dir 文本 显示 方向 属性 
lang 指定 语言 属性 
class 类 属性 
style 定义 级 联 样式 属性 
id 标记 属性 
title 标题 属性 


4.5 | 水 平分 隔 线 元 素 <hr> 


水 平分 隔 线 元 素 <hr> 用 一 条 一 定 高 度 的 分 隔 线 ， 分 隔 页 面 内 容 。 在 使 用 <hr> 元 素 的 地 方 ， 
文本 将 换行 显示 。 语 法 结构 如 下 所 示 。 


<hr> 
下 面 是 使 用 <hr> 元 素 的 实例 。 其 代码 如 下 所 示 。 
hr.html 


01 <body> 
注意 页 面 的 显示 方式 ， 唐 诗 <hr 户 白 日 依 山 尽 ， 黄 河 入 海流 。 
02 <body> 


其 代码 运行 后 ， 注 意 在 <hr> 的 地 方 会 出 现 水 平分 阳线， 显示 效果 如 图 4-22 所 示 。 
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EE Wi ‘oft Internet ER 
| 文件 四 编辑 到 ) 二 收藏 TIRE ”| 和 
QO-:HAnPe ~” 
地址 加 | 司 7= 加 #3 撤 ”区 sst 国营 


注意 页 面 的 显示 方式 ， 唐 诗 
白 日 依 山 尽 ， 黄 河 入 海流 。 


EC 
图 4-22 使 用 <hr> 元 素 的 显示 效果 


在 没有 定义 任何 属性 的 情况 下 ，<hr> 元 素 的 宽度 将 和 容器 元 素 的 宽度 相同 。<hr> 元 素 中 可 
以 使 用 的 所 有 属性 ， 如 表 4-11 所 示 。 


表 4-11 <hr> 元 素 的 所 有 属性 


代码 写法 属性 名 称 
dir 文本 显示 方向 属性 
lang 指定 语言 属性 
class 类 属性 
style 定义 级 联 样式 属性 
id 标记 属性 
tile 标题 属性 
color 颜色 属性 
align 对 齐 属 性 
width 宽度 属性 
size 厚度 属性 


4.5.1 高 度 属性 size 


水 平分 隔 线 的 厚度 属性 size， 用 来 定义 水 平分 隔 线 的 粗细 。 水 平分 隔 线 的 显示 效果 是 一 种 
凹陷 的 3D 效果 ， 使 用 size 属性 ， 将 能 够 更 改 分 隔 线 的 厚度 。 语 法 结构 如 下 所 示 。 


<hr size= "数字 值 " 广 
数字 值 的 单位 是 像素 。 下 面 是 使 用 size 属性 的 实例 。 其 代码 如 下 所 示 。 
hr-size.html 


01 <body> 
02 注意 页 面 的 显示 方式 ， 中 间 使 用 <hr size="30" > 空山 新 雨 后 ， 天 气 晚 来 秋 。 
03 </body> 


这 


02 行 中 定义 了 水 平 线 的 高 度 ， 其 代码 运行 后 , 页 
面 中 间 会 出 现 高 度 为 30 的 分 隔 线 , 显示 效果 如 图 4-23 
所 示 。 


4.5.2 ”样式 属性 noshade 


水 平分 隔 线 的 样式 属性 noshade 用 来 更 改 水 平分 
隔 线 默认 的 3D 效果 为 平面 的 2D 效果 。 同时 水 平分 隔 
线 将 会 以 更 改 后 的 格式 显示 。 语 法 结构 如 下 所 示 。 

<hr noshade =" noshade" /> 图 4-23 使 用 size 属性 的 显示 效果 


noshade 属性 中 没有 任何 取 值 ， 所 以 要 用 自身 名 称 作为 值 。 
下 面 是 使 用 noshade 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb hr-noshade.html 
01 <body> 
没 使 用 noshade 属性 的 分 隔 线 
02 <hrsize="20" /> 
使 用 noshade 属性 的 分 隔 线 
03 <hr size="20" noshade="noshade" /> 
04 </body> 


| | 说 明 
| 
4 为 了 明显 看 出 使 用 属性 后 的 显示 效果 ， 用 一 个 没有 使 用 noshade 属性 的 水 平分 隔 
线 作 为 对 比 。 


其 代码 运行 后 , 在 正 浏览 器 中 的 显示 效果 ,如 图 4-24 所 示 。 在 Firefox 浏览 器 中 的 显示 效 


果 ， 如 图 4-25 所 示 。 


没 使 用 noshade 属 性 的 分 隔 线 


| 
使 用 noshade 属 性 的 分 隔 线 


ET ET 昌 
图 4-24 使 用 size 属性 在 正中 的 显示 效果 。 图 4-25 使 用 size 属性 在 Firefox 中 的 显示 效果 
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4.5.3 ”宽度 属性 width 
水 平分 隔 线 的 宽度 属性 width 用 来 定义 水 平分 隔 线 的 宽度 。 语 法 结构 如 下 所 示 。 


<hr width=" 数 字 值 " 亡 
数字 值 的 单位 是 像素 。 下 面 是 使 用 width 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb hr-width.html 


01 <body> 
注意 页 面 的 显示 特点 ， 在 水 平分 隔 线 中 使 用 width 属性 的 实例 
02 <hr width="200" 户 


03 </body> 
02 行 中 使 用 了 宽度 属性 width， 其 代码 运行 后 ， 显 示 效 | 
果 如 图 4.26 所 示 。 ee ee ee 
[ET [EEC E 囊 
4.5.4 ”对齐 属 性 align 注意 页 面 的 显示 特点 ， 在 水 平分 隔 线 中 使 ;| 


用 width 属性 的 实例 


水 平分 隔 线 的 对 齐 属 性 align 用 来 定义 水 平分 隔 线 的 对 
齐 方式 。 与 <div> 元 素 的 align 属性 有 所 区 别 ， 因 为 <hr> 元 素 
不 能 包含 内 容 ， 所 以 align 属性 是 指 元 素 本 身 相 对 于 父 元 素 
的 对 齐 方式 。 语 法 如 下 所 示 。 图 4-26 使 用 width 属性 的 显示 效果 

<hr alien=" 属 性 值 " 记 


align 属性 的 具体 取 值 和 含义 如 表 4-12 所 示 。 下 面 是 使 用 align 属性 的 实例 。 其 代码 如 下 
所 示 。 


BE 


表 4-13 align 属性 的 取 值 及 含义 


属性 代码 代码 含义 
居中 对 齐 ( 默 认 值 ) 
左 侧 对 齐 


右 侧 对 齐 


center 


hr-align.html 
01 <body> 
水 平分 隔 线 用 左 对 齐 
02 <hrwidth="300" align="left" /> 
水 平分 隔 线 用 中 间 对 齐 
03 <hrwidth="300" align="center" /> 
水 平分 隔 线 用 右 对 齐 
04 <hr width="300" align="right" /> 
05 </body> 
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02 到 04 行 中 都 设置 水 平 线 的 长 度 为 300， 分 别 定 
义 了 3 条 水 平 线 以 左 对 齐 、 中 间 对 齐 和 右 对 齐 显示 ,其 
代码 运行 后 的 显示 效果 如 图 4-27 所 示 。 


4.5.5 颜色 属性 color 水 平分 隔 线 用 中 间 对 齐 


水 平分 隔 线 用 右 对 齐 
水 平分 隔 线 的 颜色 属性 color 用 来 定义 水 平分 隔 线 
的 显示 颜色 。3D 形式 的 水 平分 隔 线 默 认 是 没有 颜色 的 ， 
2D 形式 的 水 平分 隔 线 默认 的 颜色 是 灰色 。 语 法 结构 如 
下 所 示 。 
<hr color= "颜色 值 "人 
下 面 是 使 用 color 属性 的 实例 。 其 代码 如 下 所 示 。 


hr-color.html 

01 <title> 颜 色 属性 </title> 

02 <style type="text/css"> 

< 二 

.STYLE1 {color: #0000FF} 

一 > 

03 </style> 

04 </head> 

05 <body> 

06 <span class="STYLE1"> 水 平分 隔 线 中 使 用 color 属性 </span> 
07 <hr size="20" color="#999999" /> 
08 </body> 


在 本 例 程 中 , 02 和 03 行 中 设置 字体 的 颜色 为 蓝 色 ，07 行 中 设置 水 平 线 的 宽度 为 20 像素 ， 
颜色 为 浅 灰色 ,位 置 为 默认 属性 ， 其 代码 运行 后 的 显示 效果 如 图 4-28 所 示 。 


水 平分 隔 线 中 使 用 color 属 性 


4-28 使 用 color 属性 的 显示 效果 


文本 和 段落 元 素 


4.6 | 基于 物理 样式 的 文本 元 素 


基于 物理 样式 的 文本 元 素 用 来 显示 文本 的 加 粗 、 等 宽 、 上 下 标 、 下 划 线 等 样式 。 其 中 包括 
<b>、<>、<sub> 等 元 素 。 其 中 有 些 元 素 的 表现 效果 可 能 相同 ， 也 有 一 些 元 素 浏览 器 并 不 会 做 
任何 处 理 。 基 于 物理 样式 的 文本 元 素 中 ， 可 以 使 用 的 所 有 属性 如 表 4-13 所 示 。 


表 4-13 ”基于 物理 样式 的 文本 元 素 的 所 有 属性 


代码 写法 属性 名 称 
dir 文本 显示 方向 属性 
lan 指定 语言 属性 
class 类 属性 
style 定义 级 联 样式 属性 
id 标记 属性 
title 标题 属性 


4.6.1 加 粗 元 素 <b> 
加 粗 元 素 <b> 用 来 使 包含 的 文本 加 粗 显 示 。 语 法 结构 如 下 所 示 。 


下 面 是 使 用 <b> 元 素 的 实例 。 其 代码 如 下 所 示 。 
La bhiml 


01 <body> 

02 ”<b> 加 粗 的 字体 显示 </b> 普 通 文字 显示 。 

03 </body> 

注意 02 行 中 <b> 元 素 之 问 内 容 的 显示 方式 , 其 。 Eyre 
代码 运行 后 的 显示 效果 如 图 4-29 所 示 。 A CO 全 | 


四 三 -加 -站 四 外 | 万 旦 四 
eol ol Ona we "Bet | 
S| 


加 粗 的 字体 显示 普通 文字 显示 。 


4.6.2 ”放大 元 素 <big> 
放大 元 素 <big> 用 来 使 包含 的 文本 增 大 一 号 显 


示 。 当 文本 内 容 已 经 是 最 大 字号 时 ， 将 不 能 继续 增 
大 。 语 法 结构 如 下 所 示 。 
<big>……</big> El sl el ll lk DX 


下 面 是 使 用 <big> 元 素 的 实例 。 其 代码 如 下 所 示 。 图 4-29 使 用 <b> 元 素 的 显示 效果 
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big .html 


01 <body> 
02 ”<big> 放 大 的 字体 的 显示 方式 <big> 普 通 文字 显示 方式 。 
03 </body> 


其 代码 运行 后 ， 显 示 效果 如 图 4-30 所 示 。 


加 


可 以 在 <big> 元 素 中 再 次 使 用 <big> 元 素 ， 其 达到 的 效果 是 文本 再 次 放大 一 号 。 


下 面 是 <big> 元 素 中 再 次 使 用 <big> 元 素 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 26 国生 Wu 


01 <body> 
02 <big><big> 放 大 的 字体 的 显示 方式 <big></big> 普 通 文字 显示 方式 。 
03 </body> 


其 代码 运 运行 后 ， 显 示 效 果 如 图 4-31 所 示 。 注意 图 4-30 与 图 4-31 的 效果 差别 。 


量 无 标题 广东 Mi soft Internet Explor 


图 4-30 使 用 <big> 元 素 的 显示 效果 图 4-31 ， 媒 套 的 <big> 元 素 的 显示 效果 


4.6.3 缩小 元 素 <small> 


缩小 元 素 <small>， 用 来 使 包含 的 文本 缩小 一 号 显示 。 当 文本 内 容 已 经 是 最 小 字号 时 ， 将 
不 能 继续 变 小 。 语 法 结构 如 下 所 示 。 


下 面 是 使 用 <small> 元 素 的 实例 。 其 代码 如 下 所 示 。 
small.html 


01 <body> 
02 ”<small> 缩 小 的 字体 </small> 普 通 字体 。 
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一 


03 <lbody> 
02 行 中 <small> 元 素 之 间 的 内 容 会 缩小 。 其 代码 运行 后 ， 显 示 效果 如 图 4-32 所 示 。 同 样 ， 
<small> 元 素 也 可 以 翌 套 使 用 。 其 代码 如 下 所 示 。 


| 例 程 4-28| small.html 


01 <body> 
02 ”<small><small> 缩 小 的 字体 </small> 


02 行 中 嵌 套 使 用 缩小 元 素 ， 这 些 文本 会 以 更 小 的 形式 显示 。 其 代码 运行 后 ， 显 示 效 果 如 


图 4-32 ”使 用 <small> 元 素 的 显示 效果 图 4-33 嵌 套 的 <small> 元 素 的 显示 效果 


4.6.4 ”斜体 显示 元 素 <i> 
斜体 显示 元 素 <i>， 用 来 使 包含 的 文本 内 容 以 斜体 的 方式 显示 。 语 法 结构 如 下 所 示 。 


< </> 
下 面 是 使 用 < 户 元 素 的 实例 。 其 代码 如 下 所 示 。 


例 程 4-29 节 轴 ul 


01 <body> 

02 ”<i> 斜 体 显示 的 文本 < 人 > 普通 文本 。 《 着 加 多 
03 <body> 址 四 [en ww :| 回 | 3 
EE 普通 页 面 文本 的 显示 


02 行 中 使 用 了 斜体 显示 元 素 <>， 其 代码 运行 后 ， 显 
示 效 果 如 图 4-34 所 示 。 


4.6.5 下 标 元 素 <sub> | 
下 标 元 素 <sub> 用 来 使 包含 的 文本 内 容 以 下 标的 方式 图 4-34 使 用 <i> 元 素 的 显示 效果 
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显示 。<sub> 元 素 中 的 文本 的 顶部 ， 将 在 普通 文本 的 一 半 高 度 上 显示 。 语 法 结构 如 下 所 示 。 


下 面 是 使 用 <sub> 元 素 的 实例 。 其 代码 如 下 所 示 。 
sub html 


01 <body> 
唐诗 无 题 <sub> 作 者 李商隐 </sub> 身 无 彩 凤 双飞 辟 ， 心 有 灵犀 一 点 通 。 


02 <body> 
<sub> 中 的 文字 就 是 下 标 部 分 ， 其 代码 运行 后 ， 显 示 效 果 如 图 4-35 所 示 。 
| Dl 
» 


证 - 连续 使 用 两 个 下 标 元 素 并 不 会 产生 三 加 让 果 


下 面 是 连续 使 用 两 个 下 标 元 素 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 4-31 | subtwo.html 


01 
唐诗 无 题 <sub> 作 者 李商隐 </sub><sub> 是 一 首 优秀 的 七 绝 </sub> 身 无 彩 凤 双 飞 翼 ， 心 有 灵犀 一 点 通 。 
02 </body> 

其 代码 运行 后 ， 显 示 效 果 如 图 4-36 所 示 。 


icrosoft Internet Explorer 


,， 心 有 灵 肥 一 


EE 


唐诗 无 题 作者 李商隐 是 一 首 优秀 的 七 绝 身 无 彩 凤 双 
飞 朋 ,心有灵犀 一 点 通 。 


图 4-35 ”使 用 <sub> 元 素 的 显示 效果 图 4-36 连续 使 用 <sub> 元 素 的 显示 效果 


嵌 套 使 用 <sub> 元 素 可 以 产生 又 加 的 效果 。 下 面 是 使 用 由 套 的 两 个 下 标 元 素 的 实例 。 代 码 
如 下 所 示 。 
subthree html 


01 
普通 文本 <sub> 下 标 中 显示 的 文本 <sub> 注 意 这 里 面 下 标 显示 的 文本 </sub></sub> 普 通 文本 。。 
02 </body> 
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其 代码 运行 后 ， 显 示 效 果 如 图 4.37 所 示 。 四 
可 以 看 到 嵌 套 的 两 个 下 标 元 素 后 ， 页 面 中 会 在 下 标 | 台中 mm 震中 waW TRU 亲本 避 


当下 标 元 素 的 使 用 -~ 本 oft Internet Erplor 


(REN HOI | 
文字 中 再 次 出 现下 标 。 | 
习 
普通 文本 下 标 中 显示 的 文本 、 ee 
4.6.6 上 标 元 素 <sup> a 的 文本 注意 这 里面 下 标 显示 的 文本 


上 标 元 素 <sup> 用 来 使 包含 的 文本 内 容 以 上 标的 方 
式 显示 。<sup> 元 素 中 的 文本 的 底部 ， 将 在 普通 文本 的 一 
半 高 度 上 显示 。 语 法 结构 如 下 所 示 。 一 广 [wom 一 


<sup>……</sup> 图 4-37 嵌 套 使 用 <sub> 元 素 的 显示 效果 


下 面 是 使 用 <sup> 元 素 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 4-33| sup.html 


01 4 
普通 位 置 <sup> 注 意 这 些 文字 的 位 置 </sub> 
02 </body> 


其 代码 运行 后 ， ae 显示 效果 如 图 4-38 所 示 。 


局 上 标 元 床 - Nicrosoft Internet Iz9160 
| 文件 加 一 收藏 Q) 工具 加 ) 一 


RE -Om | 


普通 位 置 注意 这 些 文字 的 位 置 


BE 
4-38 ”使 用 <sup> 元 素 的 显示 效果 


Ti mp 


4, € 基于 内 容 的 文本 元 素 


在 HTML 中 ， 含 有 用 来 改变 文本 表现 效果 的 元 素 。 这 些 元 素 可 以 分 为 两 类 。 一 类 是 基于 
内 容 的 文本 元 素 , 其 含义 是 按照 文本 的 功能 性 来 定义 元 素 。 另 一 类 是 基于 物理 样式 的 文本 元 素 ， 
含义 是 用 来 改变 文本 的 表现 效果 。 基 于 内 容 的 文本 元 素 ， 有 很 好 的 语义 性 ,包括 <em>、<cite>、 
<strong> 等 元 素 。 其 中 有 一 些 元 素 可 能 有 相同 的 表现 效果 ， 也 有 一 些 元 素 ， 浏 览 器 并 不 会 做 任 
何 处 理 。 基 于 内 容 的 文本 元 素 中 ， 可 以 使 用 的 所 有 属性 如 表 4-14 所 示 。 
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跟 我 学 HTML+CSS 


表 4-14_ 基 于 内 容 的 文本 元 素 的 所 有 属性 


代码 写法 属性 名 称 
dir 文本 显示 方向 属性 
lang 指定 语言 属性 
class 类 属性 
style 定义 级 联 样式 属性 
id 标记 属性 
title 标题 属性 


4.7.1 强调 元 素 <em> 


强调 元 素 <em> 用 来 强调 内 容 。 一 般 被 强调 的 部 分 会 以 斜体 显示 ， 用 于 和 普通 文本 相 区 别 。 


语法 结构 如 下 所 示 。 


下 面 是 使 用 <em> 元 素 的 实例 。 其 代码 如 下 所 示 。 


Wb em.html 


01 <body> 
02” ”<em> 注意 这 些 文字 的 显示 </em> 普 通 页 面 文 文字 
03 </body> 


02 行 中 代码 <em> 中 间 的 部 分 会 以 斜体 的 形式 出 
现 ， 运 行 代码 后 ， 显 示 效 果 如 图 4-39 所 示 。 
4.7.2 ”加 粗 的 强调 元 素 <strong> 


加 粗 的 强调 元 素 <strong> 用 来 强调 内 容 。 与 <em> 元 
素 不 同 的 是 ， 使 用 <strong> 元 素 的 文本 将 会 以 加 粗 的 格 
式 显示 ， 用 于 和 普通 文本 相 区 别 。 语 法 结构 如 下 所 示 。 


<strong>……</strong> 


下 面 是 使 用 <strong> 元 素 的 实例 。 其 代码 如 下 所 示 。 


bE strong.html 


=l9|lx] 
文件 四 并 得 查看 W) 收 启 @) 工具 CD) 帮 >| 圳 | 
Om-O I Pem 
地 址 四 [En wy TS] 加 93 | ” 国 swat 图 加 | 


习 
翌 丫 训 些 区 户 抱 旺 示 普通 页 面 文 文字 


BE 


图 4-39 ”使 用 <em> 元 素 的 显示 效果 


Ty pter 


01 <body> 
02” ”<strong> 这 里 是 被 强调 的 文本 </strong> 这 里 是 普通 文本 
03 </body> 


86 


一 
02 行 中 <strong> 元 素 中 间 的 部 分 会 以 加 和 粗 的 形式 显示 。 其 代码 运行 后 ， 显 示 效 果 如 图 4-40 


所 示 。 


图 4-40 使 用 <strong> 元 素 的 显示 效果 


4.7.3 提取 元 素 <samp> 


提取 元 素 <samp> 从 文本 中 提取 部 分 内 容 ， 提 取 部 分 内 容 将 会 比 其 他 内 容 小 一 些 。 语 法 结 
构 如 下 所 示 。 


<samp> 包 含 的 内 容 部 分 </samp> 
下 面 是 使 用 <samp> 元 素 的 实例 。 其 代码 如 下 所 示 。 


samp.html 


01 <body> 
02 ”<samp> 这 里 被 提取 的 文本 。 唐 诗 三 百 首 </samp> 这 里 是 普通 页 面 文本 。 唐 诗 三 百 
03 </body> 


02 行 中 使 用 提取 元 素 <samp>， 其 代码 运行 后 ， 显 示 效 果 如 图 4-41 所 示 。 


4.7.4 首 字 母 缩 写 元 素 <acronym> 


首 字 母 缩写 元 素 <acronym> 用 来 显示 包含 内 容 的 a 
首 字母 缩写 显示 。 由 于 浏览 器 到 目前 为 止 还 不 支持 此 属 。 | 本 启 = 百 
性 ， 所 以 没有 特殊 的 显示 效果 。 语 法 结构 如 下 所 示 。 


<acronym> 包 含 的 内 容 部 分 </acronym> 
由 于 浏览 器 到 目前 为 止 还 不 支持 此 属性 ， 所 以 将 ”ERA | 
不 做 实例 演示 了 。 4-41 ”使 用 <samp> 元 素 的 显示 效果 


4.7.5 变量 显示 元 素 <var> 
变量 显示 元 素 <var> 用 来 显示 源 程序 中 的 变量 。 和 <code> 元 素 类 似 ， 一 般 用 来 显示 程序 内 
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容 。 其 包含 的 文本 将 会 以 斜体 方式 显示 。 语 法 结构 如 下 所 示 。 


下 面 是 使 用 <var> 元 素 的 实例 。 其 代码 如 下 所 示 。 


bE var.html 

01 <body> 
02 ”<var> 这 里 的 部 分 是 源 程序 的 文本 ，</var> 这 里 是 普通 页 面 文本 
03 </body> 


02 行 中 使 用 了 变量 显示 元 素 <var>， 其 代码 运行 后 ， 
显示 效果 如 图 4-42 所 示 。 


4.7.6 ”文献 参考 元 素 <cite> | 让 wearoyxA， 这 时 

文献 参考 元 素 <cite> 用 来 定义 一 段 引 用 的 文本 内 容 。 
使 用 <cite> 元 素 的 文本 , 一 般 将 会 以 斜体 的 格式 显示 , 用 来 
和 普通 文本 相 区 别 。 语 法 结构 如 下 所 示 。 


[SE vm 
图 4-42 使 用 <var> 元 素 的 显示 效果 


<body> 
02 ”<cite> 这 里 是 被 引用 的 文本 </cite> 这 里 是 普通 文本 
03 </body> 


02 行 中 使 用 了 文献 参考 元 素 <cite>。 其 代码 运行 后 ，<cite> 元 素 之 间 内 容 将 以 斜体 形式 显 
示 ， 显 示 效 果 如 图 4-43 所 示 。 


这 里 是 规 引 万 的 浆 素 这 里 是 普通 文本 


| [IF CA 如 
图 4-43 ”使 用 <cite> 元 素 的 显示 效果 


4.8. 本 章 习题 


二 和 选择 题 


1. 在 HTML 中 ， 标 记 <pre> 的 作用 是 ( ”)。 
A. 标题 标记 。 ”B. 预 排 版 标记 。C. 转行 标记 D. 文字 效果 标记 
2. 在 HIML 中 ， 具 有 对 文字 加 粗 作 用 的 是 (”)。 


A.<b> B. <big> C. <em> D. <strong> 
3. 网 页 中 “换行 符 ” 对 应 的 标签 是 (。 )。 

A.hr B.div C.br D.p 

4. 层 元 素 中 用 于 设置 文本 对 齐 属性 的 是 (。 )。 

A. class B. style C. align D.id 


5. 关于 文本 对 齐 ， 源 代码 设置 不 正确 的 一 项 是 : (” )。 
A. 居中 对 齐 : <div align="middle">...</div> 

B. 居 右 对 齐 : <div align="right">...</div> 

C. 居 左 对 齐 : <div align="left">...</div> 

D. 两 端 对 齐 : <div align="justify">...</div> 

6. 要 控制 水 平 线 的 粗细 ， 应 使 用 以 下 属性 : 
A. color 

B. width 

C. size 

D. height 

7. 以 下 说 法 中 ， 正 确 的 是 : 

A.P 标记 符 与 BR 标记 符 的 作用 一 样 

B. 多 个 P 标 记 符 可 以 产生 多 个 空 行 

C. 多 个 BR 标记 符 可 以 产生 多 个 空 行 

D.P 标记 符 的 结束 标记 符 通常 不 可 以 省 略 


二 、 填 空 题 
1. <hr width=50%> 表 示 创 建 一 条 的 水 平 线 。 
2. 要 设置 一 条 1 像素 粗 的 水 平 线 ， 应 使 用 的 HTML 语句 是 a 


3. 要 使 文字 同时 显示 为 粗 体 和 斜体， 应 使 用 语句 
4. 要 是 页 面 中 的 文字 不 自动 换行 ， 应 该 使 用 属性 , 而 用 ”属性 取消 制 动 


换行 。 


5. 设置 一 个 宽度 为 30px， 长 度 为 200px， 颜 色 为 紫色 的 水 平 线 的 代码 是 


一 


三 、 实 战 练习 


1. 制作 页 面 ， 加 入 一 段 文字 ， 并 要 求 用 宽度 为 30px， 长 度 为 200px， 颜 色 为 黑色 的 水 平 
线 将 文字 分 开 。 

2. 制作 页 面 ， 要 使 一 段 文字 同时 显示 为 粗 体 和 斜体 ， 另 一 段 文字 用 到 上 标 和 下 标 。 

3， 制作 页 面 ， 使 用 <div> 元 素 调用 css 样式 设置 页 面 的 文本 显示 效果 。 


引 表 元 素 


列表 元 素 ， 是 用 来 定义 条 目 信息 数据 的 主要 方法 。 按 照 功能 和 显示 效果 不 同 ， 列 表 元 素 可 
以 大 致 分 为 无 序列 表 、 有 序列 表 和 定义 列表 三 类 。 页 面 中 通常 使 用 的 列表 元 素 包括 <ul>、<ol>、 
<dl>、<li> 等 。 


六 、 本 章 主 要 内 容 有 : 


@ 无 序列 表 ， 使 用 <ul> 和 <li> 元 素 定义 。 
@ 有 序列 表 ， 使 用 <ol> 和 <li> 元 素 定义 。 
@ 定义 列表 ， 使 用 <dlj>、<dt> 和 <dd> 元 素 定义 。 


S.1 无 序列 表 元 素 <ul> 


无 序列 表 元 素 <ul> 用 来 定义 没有 顺序 编号 的 列表 元 素 。 例 如 ， 在 网 页 的 某 个 栏目 中 展示 详 
细 分 类 等 。 语 法 结构 如 下 所 示 。 


01 <body> 
02 ”<font size=5 color="#0033FF"> 提 供 下 载 的 书籍 : </font><br><br> 
03 <u> 
<1i> 历 史 故 事 
<li> 各 类 工具 书 
<1i> 计 算 机 教程 
<1i> 人 物 传记 
04 <u> 
05 </body> 


该 实例 中 ，03 和 04 行 之 间 定义 了 一 个 含有 4 个 条 目的 无 序列 表 。 其 运行 后 的 显示 效果 ， 
如 图 5-1 所 示 。 


图 5-1 使 用 <ul> 元 素 的 显示 效果 
在 <ul> 元 素 中 ， 不 但 可 以 使 用 文本 内 容 ， 同 时 也 可 以 使 用 图 片 内 容 。 下 面 是 在 <ul> 元 素 中 
使 用 图 像 元 素 的 实例 ， 其 代码 如 下 所 示 。 


Wb ultwo.html 
01 <body> 


92 


列表 元 素 


02 <u> 
<li><img sre="http://www.w3.org/Icons/right" alt="pic" > 图 片 1 

<li><img ste="http://www.w3.org/Icons/right" alt="pic" > 图 片 2 
<li><img ste="http://www.w3.org/Icons/right" alt="pic" 广 图 片 3 
<li><img sre="http://www.w3.org/Icons/right" alt="pic" /> 图 片 4 
<li><img ste="http://www.w3.org/Icons/right" alt="pic" /> 图 片 5 

03 <uP> 

04 </body> 


在 该 实例 中 ，02 和 03 行 之 间 使 用 了 W3C 官方 站 点 的 一 个 图 像 文件 ， 其 运行 后 的 显示 效 
果 如 图 5-2 所 示 。 


怠 无 序列 表 元 素 - microseft InterseeE291 呈 I: 


文件 四 “编辑 到) 查看 WW 收 蕊 W 工具 DJ 各 ”| 恺 | 
GEEGGRISEOIJDAA 
地 址 @) [En wy 17] 园 和 | 链接 ” 国 smait 国 过 


。 图 片 5 


BE 
图 5-2 ”<ul> 元 素 中 使 用 图 片 的 显示 效果 


从 图 5-2 可 以 看 出 ， 当 在 列表 中 使 用 了 图 片 元 素 后 ， 列 表 前 面 的 修饰 部 分 ， 将 默认 地 显示 
在 列表 行 的 底部 。<ul> 元 素 中 可 以 使 用 的 所 有 属性 如 表 5-1 所 示 。 


表 5-1 <ul> 元 素 的 所 有 属性 


文本 显示 方向 属性 
指定 语言 属性 

类 属性 
定义 级 联 样式 属性 
项 目 符号 的 类 型 属性 
标题 属性 

标记 属性 


项 目 符号 的 类 型 属性 type 用 来 指定 列表 条 目前 的 项 目 符号 (列表 条 目前 的 修饰 部 分 ) 的 类 
型 。 语 法 结构 如 下 所 示 。 


<ultype= 符 号 类 型 > 
< 这 第 1 项 
<li> 第 2 项 
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跟 我 学 HTML+CSS 


其 中 type 属性 的 取 值 有 disc、circle 和 square 这 3 种 ， 下 面 是 一 个 使 用 type 属性 的 实例 。 
其 代码 如 下 所 示 。 


be ul-type.html 


01 
02 
03 


<body> 
<font size=5 color="#990000'"> 一 楼 主要 出 售 的 商品 种 类 : </font><br><br> 
<ul type="square"> 

<1> 生 活用 品 

<l> 蔬 菜 肉 类 

<l 户 衣服 


04 <l> 


<hr color="#CC0000" size=2> 


06 ”<font size=5 color="#990000'"> 二 楼 主要 出 售 的 电子 产品 :</font><br><br> 


08 
09 


<ul type="circle"> 
<1> 手 机 
<l 记 数码 相机 
<IP> 计 算 机 
<1> 学 习 机 
<l> 音 响 设备 
</ul> 
</body> 


03 和 07 行 中 使 用 <ul type=" "> 的 方法 分 别 定义 了 条 目前 面 的 符号 类 型 为 方块 和 圆 , 其 代码 


运行 后 ， 


显示 效果 如 图 5-3 所 示 。 


无 序列 表 的 类 型 定义 也 可 以 在 <li> 项 中 进行 ， 其 语法 结构 如 下 所 示 。 
<litype 一 符号 类 型 > 
这 样 定义 的 结果 是 对 单个 项 目 进行 定义 ， 实 例 代码 如 下 。 


ba ul.html 


01 
02 
03 


04 
05 


<body> 

<font size=5 > 出 售 的 图 书 种 类 : </font><br><br> 
<ul> 

<litype=disc > 电子 杂志 类 书籍 
<litype=circle> 人 物 传记 类 书籍 

<litype=square > 社会 科学 类 书籍 

<ul> 

</body> 


03 和 04 行 之 间 的 各 个 条 目 中 使 用 了 不 同 的 无 序列 表 的 类 型 ,代码 运行 后 显示 效果 如 图 5-4 


所 示 。 


5.2, 有 序列 表 元 素 <ol> 


有 序列 表 元 素 <ol>， 用 来 定义 有 顺序 编号 的 列表 元 素 。 例 如 ， 一 个 教程 的 分 步 讲解 等 列表 
内 容 。 语 法 结构 如 下 所 示 。 
<oF> 


下 面 是 一 个 使 用 <oP> 元 素 的 实例 。 其 代码 如 下 所 示 。 


sol.html 

01 <body> 

02 ”<font size=5 color="#990000'> 本 次 图 书 推荐 </font><br><br> 
03 <op> 

<1i> 古 典 文学 

<li> 计 算 机 编程 

<1i> 人 物 传记 

<i> 现 代 文 学 


04 <ol> 
05 </body> 


该 实例 中 ，03 和 04 行 之 间 定 义 了 一 个 含有 4 个 条 目的 有 序列 表 。 其 运行 后 的 显示 效果 ， 
如 图 5-5 所 示 。 同 样 在 <ol> 元 素 中 ， 也 可 以 使 用 图 片 内 容 。 下 面 是 在 <ol> 元 素 中 使 用 图 像 元 素 
的 实例 ， 其 代码 如 下 所 示 。 


We oltwo.html 

01 <body> 

02 ”<font size=5 color="#0033FF"> 引 用 图 片 </font><br><br> 

03 <ol> 
<li><img sre="http://www.w3.org/Icons/right" alt="pic" /> 图 片 ] 
<li><img sre="http://www.w3.org/Icons/right" alt="pie" 上 > 图 片 2 
<li><img sre="http://www.w3.org/Icons/right" alt="pic" /> 图 片 3 
<li><img sre="http://www.w3.org/Icons/right" alt="pic" /> 图 片 4 
<li><img sre="http://www.w3.org/Icons/right" alt="pie" /> 图 片 5 

04 </oP> 

05 </body> 


在 该 实例 中 ，03 和 04 行 之 间 的 各 个 条 目 都 使 用 了 W3C 官方 站 点 的 一 个 图 像 文件 ， 其 运 
行 后 的 显示 效果 ， 如 图 5-6 所 示 。 


图 5-5 ”使 用 <o> 元 素 的 显示 效果 图 5-6 <ol> 元 素 中 使 用 图 片 的 显示 效果 


从 图 5-6 可 以 看 出 ， 在 <oP> 列 表 中 ， 列 表 条 目前 的 项 目 符号 是 从 1 开始 依次 增加 的 整数 。 
同 <ul> 元 素 一 样 ， 项 目 符号 将 默认 地 显示 在 列表 行 的 底部 。 


5.2.1 项 目 符号 的 类 型 属性 type 


项 目 符号 的 类 型 属性 type 用 来 指定 列表 条 目前 的 项 目 符号 (列表 条 目前 的 修饰 部 分 ) 的 
类 型 。 
语法 结构 如 下 所 示 。 


<ol type=" 属 性 值 "> 其 他 元 素 </ol> 
其 中 type 属性 的 取 值 和 含义 ， 如 表 5-2 所 示 。 


列表 元 素 


表 5-2 type 属性 的 取 值 及 含义 


属 性 值 
数字 1，2，3，4…… 
小 写 英文 字母 a，b，c，d… 


大 写 英文 字母 A, B,C, D 


小 写 罗马 数字 i， 这 ， 这 ，iv……- 


大 写 罗 马 数字 I， 开 ，IIT，IV…… 


下 面 是 一 个 使 用 type 属性 的 实例 。 其 代码 如 下 所 示 。 


ol-type.html 


01 <body> 


02 ”<font size=4 color="#990000'"> 音 乐 种 类 </font><br><br> 


03 <oltype="A’> 
<l 记 古典 音乐 
<1i> 民 间 音 乐 
<l> 校 园 音乐 
<1> 流 行 音 乐 
<1i> 届 士 音乐 

04 ”<o> 

05 <hrsize=2 color="#999999"> 


06 ”<font size=4 color="#990000"> 文 化 知识 </font><br><br> 


07 <oltype="I"> 
< 这 历史 知识 
<l> 地 理 知识 
<1i> 天 文 知识 
< 这 政治 知识 
<1i> 军 事 知识 
<l> 经 济 知识 

08 <o> 

09 </body> 


代码 中 03 行 和 07 行 中 统一 指定 列表 条 目前 的 
项 目 符号 分 别 为 大 写 英文 字母 A 和 罗马 字母 I 开 始 ， 
其 代码 运行 后 ， 显 示 效果 如 图 5-7 所 示 。 


5.2.2 ”有 序列 表 的 起 始 值 属性 start 


有 序列 表 的 起 始 值 属性 start 用 来 指定 有 序列 表 
中 项 目 符号 的 初始 值 。 语 法 结构 如 下 所 示 。 
<ol start=" 数 字 值 "> 其 他 元 素 </ol> 


加 
©O= -© dW mm mr | " 
Ofer a 全国 症 可 


> el 


CT 


图 5-7 <ob> 元 素 中 使 用 type 属性 的 显示 效果 
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01 <body> 
02 ”<font size=4 color="#990000"> 音 乐 种 类 </font><br><br> 
03 <oltype="A" start="6"> 

<1i> 古 典 音乐 


代码 中 03 行 中 指定 列表 条 目前 的 项 目 符号 从 第 6 个 大 写 英文 字母 开始 ，07 行 中 指定 列表 
条 目前 的 项 目 符号 从 第 5 个 罗马 字母 开始 。 其 代码 运行 后 ， 显 示 效 果 如 图 5-8 所 示 。 


> 


( IW Fens 加 


5-8 ”<ol> 元 素 中 使 用 start 属性 的 显示 效果 


从 图 5-8 可 以 看 出 ， 当 定义 了 start 属性 后 ， 第 一 个 有 序列 表 从 第 6 个 字母 开始 ,第 二 个 有 
序列 表 从 大 写 罗马 数字 5 开始 。 


列表 元 素 


村 .了 | 列表 条 目 元 素 <li> 


| 
列表 条 目 元 素 <li>， 用 来 定义 列表 中 的 条 目 。 语 法 结构 如 下 所 示 。 
<1i> 其 他 内 容 <0i> 


<li> 元 素 既 可 以 使 用 在 有 序列 表 里 ， 也 可 以 使 用 在 无 序列 表 里 。 在 以 上 的 实例 中 ， 列 表 元 
素 中 均 使 用 了 <1i> 元 素 , 所 以 就 不 做 实例 演示 了 。<1i> 元 素 中 可 以 使 用 的 所 有 属性 如 表 5-3 所 示 。 


表 5-3_< 必 > 元 素 的 所 有 属性 


属性 名 称 下 四 于 大 

文本 显示 方向 属性 dir 

指定 语言 属性 lang 

类 属性 class 

定义 级 联 样式 属性 style 

项 目 符号 的 类 型 属性 ype 

标题 属性 title 

标记 属性 id 

条 目 编号 属性 value 


5.3.1 项 目 符号 的 类 型 属性 type 


项 目 符号 的 类 型 属性 type 用 来 指定 列表 条 目前 的 项 目 符号 的 类 型 。 语 法 结构 如 下 所 示 。 
<litype=" 属 性 值 "> 其 他 元 素 </li> 


其 中 type 属性 的 取 值 ， 根 据 包含 <li> 元 素 的 父 元 素 的 类 型 不 同 ， 可 以 使 用 相应 有 序列 表 或 
无 序列 表 中 的 值 。 
下 面 是 一 个 在 <li> 元 素 使 用 type 属性 的 实例 。 其 代码 如 下 所 示 。 


Wa) li-type.html 

01 <body> 

02 ”<font size=4 color="#990000'> 古 典 文学 </font><br><br> 

03 <u> 
<I 记 唐诗 </i> 
<litype="circle'> 宋 词 </li> 
<] 访 元 散曲 </i> 
<litype="square"> 明 清 小 说 </li> 
<I 记 经 史 子 集 </li> 

04 <> 

05 <hrsize=2 color="#999999"> 
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06 ”<font size=4 color="#990000"> 文 化 知识 </font><br><br> 


07 <o> 
<] 户 经济 知识 </i> 
<] 记 文学 艺术 </li> 
< type="A"> 科 学 文化 <li> 
<litype="i"> 历 史 地 理 </li> 
<litype="a"> 政 治 哲学 < 由 > 
<] 户 传统 文学 </li> 

08 </o> 

09 </body> 


在 03 行 和 07 行 的 两 个 列表 条 目 中 ， 虽 然 用 了 不 
同 的 项 目 符号 ， 但 是 代码 运行 后 ， 每 个 项 目 符号 都 按 


号 项 目 关 型 尾 性 - Whi crosort Interaet ZL 
节 件 人 鼎 缠 全 查看 WD 业 齐 他 工具 人 ) 得 肛 上 E33 


[BO- He WD Ru ©|” 


顺序 显示 , 所 以 第 07 行 中 第 3 个 条 目 显示 的 是 大 写 英 
文字 母 C 而 不 是 A， 第 4 个 条 目 接着 是 罗马 字母 iv， 
第 5 个 条 目 接着 是 小 写 的 英文 字母 e, 第 6 个 条 目 默 认 ， 
结果 以 最 常用 的 阿拉 伯 字 母 6 显示 ， 代 码 运行 后 显示 
效果 如 图 5-9 所 示 。 


5.3.2 条目 编 号 属性 value 


| 二 四 iT ww bematz] 加 9 | 人 ”| 国 sea 国营 
古典 文学 


文化 知识 


习 


条 目 编号 属性 valu 用 来 更 改 有 序列 表 中 某 一 条 目 
项 目 符号 的 初始 值 。 同 时 ， 其 后 条 目的 项 目 符号 也 将 
随 之 改变 。 语 法 结构 如 下 所 示 。 


<ol> 
<livalue=" 数 字 值 ">……</li> 
</o> 


Ea | mt 


5-9 ”< 这 元 素 中 使 用 type 属性 的 显示 效果 


因为 只 有 有 序列 表 中 才 有 条 目的 顺序 问题 ， 所 以 该 属性 只 在 <ol> 元 素 中 才能 起 作用 。 下 面 


是 一 个 使 用 value 属性 的 实例 。 其 代码 如 下 所 示 。 


wal li-value.html 


01 <body> 

02 <o> 
<1i> 列 表 内 容 1<li> 
<l> 列 表 内 容 2<Ai> 
<ivalue="5"> 列 表 内 容 3<Ai> 
<li> 列 表 内 容 4<li> 
<l> 列 表 内 容 5<i> 
<]> 列 表 内 容 6<i> 

03 <o> 

04 </body> 


在 该 实例 中 ， 使 用 value 属性 ， 将 列表 中 的 第 3 条 编号 更 改 为 5。 其 代码 运行 后 ， 显 示 效 


果 ， 如 图 5-10 所 示 。 
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图 5-10 <1i> 元 素 中 使 用 value 属性 的 显示 效果 


.4 定义 列表 元 素 <dl> 


定义 列表 元 素 <dl>， 用 来 定义 类 似 术语 或 者 词汇 表 的 列表 信息 。 其 中 的 具体 条 目 信息 ， 一 
般 包 括 术语 (或 词汇 等 内 容 )， 术 语 解释 两 个 部 分 。 语 法 结构 如 下 所 示 。 
<d> 其 他 的 定义 列表 元 素 </d> 


下 面 是 一 个 使 用 <d 忆 元 素 的 实例 。 其 代码 如 下 所 示 。 


02 ”<font size=6 color="#999999'> 简 单 的 应 用 </font><br><br> 

03 <d> 
<d 忆 唐诗 <dd> 唐 诗 是 我 国 古代 特有 的 一 种 文学 作品 ， 一 般 有 固定 的 字数 ， 常 见 的 有 绝句 和 律诗 两 类 。 
<df> 宋 词 <dd> 宋 词 是 继 唐诗 后 我 国 又 一 类 特有 的 文学 作品 。 
<dP> 孙 子 兵 法 <dd> 孙 子 兵法 是 我 国 古代 著名 兵法 家 孙武 的 军事 著作 ， 里 面 有 很 多 对 战略 战术 的 精 膀 


<df> 曹 植 <dd>“ 建 安 七 子 ”之 一 ， 是 我 国 三 国 时 期 的 著名 诗人 。 
04 <a> 
05 <body> 


该 实例 中 ，03 行 与 04 行 之 间 简 单 地 应 用 了 <dl> 元 素 的 语法 ， 其 运行 后 的 显示 效果 ， 如 图 
5-11 所 示 。 


101 


简单 的 应 用 

gies px, 

着 和 本， 天 风采 和 各 
实证 走读 后 我 加 又 类 村 有 的 六 学 作品 - 


由 记 代 震 名 兵法 家 孙 直 的 军事 著 
作 ， 允 对 战略 战 本 的 情 妹 见解 


Ab “之 一 ,是 我 国 三 国 时 期 的 著名 诗 


图 5-11 使 用 <dl> 元 素 的 显示 效果 


5.4.1 定义 列表 术语 元 素 <dt> 


定义 列表 术语 元 素 <df> 用 来 定义 <dl> 元 素 中 一 个 具体 的 条 目 。 可 以 在 <dt> 元 素 中 使 用 文 
本 、 图 片 等 元 素 ， 但 是 不 能 使 用 其 他 的 列表 元 素 。 语 法 结构 如 下 所 示 。 


”dt 元 素 可 以 在 <dl> 元 素 中 单独 使 用 也 可 以 在 后 面 使 用 <dd> 元 素 ， 一 起 构成 定 
义 列表 。 


下 面 是 一 个 使 用 <d 必 元 素 的 实例 。 其 代码 如 下 所 示 。 


Wb dt.html 
01 <body> 
02 ”<font size=6 color="#999999"> 唐 代 诗人 </font><br><br> 
03 <d> 
<dt> 陈 子 昂 <dt> 
<dd> 初 唐 最 著名 的 诗人 ， 开 创 了 唐诗 创作 的 新 路 。</dd> 
<dfe> 王 维 </de> 
<dd> 唐 代 著 名 田园 诗人 </dd> 
<d> 李 白 <d> 
<dd> 唐 代 著 名 浪漫 主义 诗人 ， 有 “ 诗 仙 ” 之 称 。</dd> 
<de 杜 甫 </de> 
<dd> 唐 代 著名 诗人 ， 有 “ 诗 圣 ”之 称 </dd> 
<de> 王 勃 <de> 
<dd> 初 唐 四 杰 之 首 ，《 腾 王 阁 序 》 是 他 的 代表 作 。</dd> 
04 </d> 
05 <body> 
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该 实例 中 ， 在 <d 忆 元 素 中 使 用 文本 。 其 运行 后 的 显示 效果 ， 如 图 5-12 所 示 。 


唐 代 诗 人 
陈 子 吊 
初 唐 最 若 名 的 诗人 ， 开 创 了 唐诗 创作 的 新 路 , 


唐 民 著名 田园 湖人 


让 从 广 代 著名 浪漫 主义 诗人 ， 有 “ 诗 仙 ”之 称 . 
唐 代 著 名 诗人 ， 有 “ 诗 圣 ”之 称 


初 唐 四 杰 之 首 ，《 膝 王 阁 序 》 是 他 的 代表 作 。 


图 5-12 ”<dt> 元 素 中 使 用 文本 元 素 的 显示 效果 


5.4.2 ”定义 列表 条 目 说 明 元 素 <dd> 
定义 列表 条 目 说 明 元 素 <dd> 用 来 定义 <dl> 元 素 中 一 个 具体 的 条 目 说 明 。 语 法 结构 如 下 所 示 。 


” <dd> 元 素 可 以 在 <dl> 元 素 中 单独 使 用 。 同 时 可 以 在 <dd> 元 素 中 使 用 其 他 的 列 


表 元 素 。 


下 面 是 一 个 使 用 <dd> 元 素 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 5-13| dd.html 


01 <body> 

02 ”<font size=6 color="#999999"> 秦 始 皇 </font><br><br> 

03 <d> 
<dt> 主 要 功绩 </dt> 
<dd> 建 立 统一 了 的 封建 国家 ， 结 束 了 各 国之 间 的 无 止 休 的 征战 。</dd> 
<dd> 开 创 了 中 国 封建 制 国家 先河 ， 是 历史 的 一 大 进步 。</dd> 
<dd> 统 一 文字 ， 促 进 了 文化 的 发 展 。</dd> 
<dd> 修 建 了 万 里 长 城 </dd> 
<dd> 实 行 郡 县 制 ， 加 强 了 国家 的 团结 统一 。</dd> 

04 <d> 

05 </body> 


其 运行 后 的 显示 效果 ， 如 图 5-13 所 示 。 
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建立 统一 了 的 封建 国家 ， 结 末了 各 国之 间 的 无 目 


休 ! : 
开创 了 中 国 封建 制 国家 先河 ， 是 历史 的 一 大 进 


策 一 文字 ， 促 进 了 文化 的 发 展 . 
您 建 了 万 里 长 
实行 都 县 制 ， 加 强 了 国家 的 团结 统一 。 


图 5-13 dl 元 素 中 使 用 <dd> 元 素 的 显示 效果 


5.5 | 本 章 习题 


一 、 选 择 题 


以 下 有 关 列表 的 说 法 中 ， 错 误 的 是 ( )。 

有 序列 表 和 无 序列 表 可 以 互相 嵌 套 

指定 嵌 套 列表 时 ， 也 可 以 具体 指定 项 目 符号 或 编号 样式 
无 序列 表 应 使 用 UL 和 LI 标记 符 进 行 创建 

在 创建 列表 时 ，LI 标记 符 的 结束 标记 符 不 可 省 略 

以 下 不 是 项 目 列表 的 前 导 符号 的 是 (。 )。 

正方 形 B. 实心 圆 C. 空心 贺 ”D. 菱形 

二 、 填 空 题 


1. 列表 元 素 包括 。” 和 

2. 在 有 序列 表 中 ， 要 求 从 6 个 大 写 罗 马 字 母 开始 的 代码 是 

三 、 实 战 练习 

1. 制作 一 个 6 条 目的 列表 ， 要 求 每 个 列表 前 面 用 不 同 的 符号 。 

2. 制作 一 个 6 条 目的 列表 ， 要 求 第 3 个 条 目 从 第 6 个 大 写 英文 字母 6 开始 。 


1 
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在 浏览 网 页 的 时 候 ， 可 以 在 网 页 上 看 到 大 量 精美 的 图 片 ， 那 么 这 些 图 片 是 如 何 放 入 页 面 
的 ? 在 放 入 页 面 中 时 ， 应 该 如 何 处 理 ? 常见 的 图 片 有 哪些 类 型 ， 各 有 什么 特点 ， 将 在 本 章 中 一 
一 解答 。 和 希望 通过 本 章 的 学 习 ， 读 者 能 够 掌握 图 像 元 素 各 种 属性 的 使 用 方法 和 表现 效果 。 
通过 本 章 的 学 习 ， 应 该 掌握 以 下 知识 要 点 : 


NS 


痊 、 本章 主要 内 容 有 : 


@ ”掌握 把 图 片 引入 页 面 的 方法 。 

@ 能 够 简单 地 处 理 引入 页 面 的 图 片 。 
@ 了 解 图 片 的 各 种 属性 。 

@ 了 解 不 同 格式 图 片 的 特点 。 


6.1 | 图 像 元 素 <img> 


图 像 元 素 <img> 用 来 在 页 面 中 定义 一 个 图 片 。 由 于 <img> 元 素 中 引用 的 图 片 路 径 不 同 ， 可 
以 使 用 各 种 格式 的 图 片 文件 。 语 法 结构 如 下 所 示 。 


<img 属性 =" 属 性 值 ">…*…</img> 
下 面 是 一 个 使 用 <img> 元 素 的 实例 。 其 代码 如 下 所 示 。 
| 例 程 6-1| img.html 


01 <body> 
<h3> 西 湖 十 景 之 雷 峰 塔 </h3> 
雷 峰 塔 简介 <br> 


雷 峰 塔 是 杭州 西湖 的 著名 景点 之 一 ， 我 们 熟悉 的 《白蛇 传 》 中 的 故事 就 发 生 在 这 里 ， 据 说 白 娘 子 就 
是 被 压 在 这 下 面 的 ， 这 里 也 是 著名 的 西湖 十 景 之 一 雷 峰 夕照 。<br> 
<!-- 在 页 面 中 居中 插入 一 张 图 片 -> 


| 男 说 明 


LE 在 该 语法 中 ，src 参数 用 来 设置 图 像 文件 所 在 的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 
也 可 以 是 绝对 路 径 。 


该 实例 中 , 03 行 中 使 用 <img> 元 素 调用 了 一 个 名 称 为 picjpg 的 图 片 。 其 运行 后 的 显示 效果 
如 图 6-1 所 示 。 


西湖 十 景 之 雷 峰 塔 
局 


峰 塔 简介 

量 峰 塔 是 杭州 西湖 的 著名 景点 之 一 ， 我 们 熟 基 的 
却 白 迪 传 》 中 的 故事 就 发生 在 这 里 所 党 日 女子 就 
让 面 的 ， 这 里 也 是 震 名 的 西 顺 十 录 之 - 


图 6-1 使 用 -ime- 元 素 的 显示 效果 
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图 像 元 素 


<img> 元 素 中 可 以 使 用 的 所 有 属性 如 表 6-1 所 示 。 


表 6-1 <img> 元 素 的 所 有 属性 


属性 名 称 SS 
文本 显示 方向 属性 dir 
指定 语言 属性 jk 
类 属性 class 
定义 级 联 样式 属性 style 
对 齐 属性 alig 
标题 属性 title 
取消 自动 换行 属性 nowrap 
标记 属性 id 
路 径 属性 sre 
蔡 代 文本 属性 alt 
加 长 替代 文本 属性 langdesc 
边框 属性 border 
高 度 属性 height 
宽度 属性 width 
左右 边 距 属性 pace 
上 下 边 距 属性 Vspace 
服务 器 端 映射 属性 ismap 
客户 端 映射 属性 Usemap 


6.1.1 图 像 元 素 的 路 径 


属性 src 


图 像 元 素 的 路 径 属性 src 用 来 定义 一 个 调用 图 片 的 路 径 。src 属性 是 <img> 元 素 中 必须 含有 
的 属性 ， 其 中 使 用 的 图 片 格式 没有 限制 ， 但 是 某 些 格式 的 图 片 可 能 无 法 正常 显示 。 语 法 结构 如 


下 所 示 。 
<img src=" 图 片 路 径 " /> 


其 中 ， 图 片 路 径 既 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 下 面 是 使 用 src 属性 的 实例 。 代 


码 如 下 。 


Wabi img-src.html 


01 <body> 


02 <img src="http://www.baidu.com/img/baidu logo.gif' /> 


03 </body> 
该 实例 中 02 行 中 调用 


了 百度 首页 的 logo 图 片 。 其 运行 后 的 显示 效果 如 图 6-2 所 示 。 
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跟 我 学 HTML+CSS 


习 无 标题 文档 - Nicrosoft Internet Ezplore 
文件 四 ”编辑 查看 WD 收 京 和 ) 工具 上 玫 助 如 | 


ISOIEEA Wm 
地 址 0) 丰 ] py Decmenz] 固 轩 到 链接 ” 屋 smait 国 过 


剧 
4 


[| | | per 
图 6-2 ”使 用 sre 属性 的 显示 效果 


6.1.2 ”代替 图 片 的 文本 属性 alt 


代替 图 片 的 文本 属性 alt 用 来 定义 当 图 片 路 径 错 误 (或 者 其 他 原因 无 法 显示 时 ), 替代 图 片 的 
文本 。 由 于 当 鼠 标 悬 停 在 图 片 内 容 上 时 ， 会 显示 alt 属性 中 定义 的 文本 ， 所 以 alt 属性 也 可 以 用 
来 定义 图 片 的 注释 内 容 。 语 法 结构 如 下 所 示 。 


<img sre=" 图 片 路 径 " alt=" 文 本 内 容 " 亡 


在 alt 属性 中 ， 可 以 使 用 的 文本 长 度 是 1024 个 字符 。 下 面 是 一 个 使 用 alt 属性 的 实例 。 其 
代码 如 下 所 示 。 


img-alt.html 
01 <body> 
02 ”<img src="http://www.baidu.com/img/baidulogo.gif'alt=" 请 注意 页 面 " 上 > 
03 </body> 


在 该 实例 中 ，02 行 中 将 调用 百度 首页 的 logo 图 片 的 路 径 写 错 了 。 其 运行 后 的 显示 效果 如 
图 6-3 所 示 。 当 用 户 运 行 这 个 例 程 代码 后 ， 把 鼠标 放 在 图 片 的 位 置 就 能 看 到 写 有 “请 注意 页 面 ” 
的 字样 了 。 

下 面 是 一 个 使 用 alt 属性 制作 图 片 注释 的 实例 。 其 代码 如 下 所 示 。 


Wb img-alttwo.html 
01 <body> 
02 <img sre=" http://www.cctv.com/homepage2006/images/cctvlogo_778.gif" alt=" 这 里 是 CCTV 的 logo 图片 
" 
03 <body> 


在 该 实例 中 ，02 行 中 使 用 alt 属性 为 图 片 定 义 注释 内 容 。 运 行 后 ， 当 鼠标 悬 停 在 图 片上 时 ， 
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显示 效果 如 图 6-4 所 示 。 


6-3 使 用 alt 属性 的 显示 效果 6-4 使 用 alt 属性 定义 的 注释 效果 


6.1.3 图像 元 素 的 宽度 属性 width 


在 网 页 中 直接 插入 图 片 的 时 候 , 图 像 的 大 小 和 原 图 是 相同 的 ,而 在 实际 应 用 的 时 候 需 要 通 
过 各 种 图 像 属 性 的 设置 调整 图 像 的 大 小 、 分 辩 率 等 内 容 。 
用 图 像 元 素 的 宽度 属性 width 来 定义 图 片 元 素 的 宽度 。 语 法 结构 如 下 所 示 。 


<img ste=" 图 片 路 径 " alt=" 文 本 内 容 " width=" 数 字 值 " /> 
其 中 数字 值 的 实际 单位 是 像素 。 下 面 是 一 个 使 用 width 属性 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 6-5| img-width.html 
01 <body> 
02 ”<h3> 雷 峰 塔 <h3> 
03 <hrsize=3> 
<br> 雷 峰 塔 原 建造 在 雷 峰 上 ， 位 于 杭州 西湖 南岸 南 屏山 日 慧 峰 下 净 慈 寺前 。 雷 峰 为 南 屏山 向 北 伸展 
的 余 脉 ， 濒 湖 勃然 隆起 ， 林 木 葱郁 。 但 民间 因 塔 在 雷 峰之 上 ， 均 呼 之 为 雷 峰 塔 。 原 塔 共 七 层 ， 重 檐 飞 栋 ， 窗 户 
洞 达 ， 十 分 壮观 。 
<br 
<!-- 在 页 面 中 居中 插入 两 张 图 片 -> 
04 <center> 
<!- 默 认 的 图 片 大 小 -> 
05 <img src=" picJPG"> 
<!-- 设 置 图 片 的 高 度 为 160 像素 --> 
06 <img sre=" pic.JPG" width=160> 
07 </center> 
08 </body> 


在 该 实例 中 ， 在 页 面 中 插入 图 片 时 ，05 行 是 按 默认 自动 插入 ， 页 面 中 图 片 大 小 和 原 图 一 
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跟 我 学 HTML+CSS 


样 ，06 行 是 定义 图 片 宽 度 为 160 像素 。 其 运 
行 后 的 显示 效果 如 图 6-5 所 示 。 从 图 6-5 可 
以 看 出 ， 虽 然 只 定义 了 图 片 的 宽度 ， 但 是 图 
片 的 高 度 也 会 按照 原 图 片 的 比例 相应 调整 。 


党 在 需 凤 上 ， 位 于 珊 ) 
的 宗 环 ， 沽 潮 


6.1.4 图像 元 素 的 高 度 属性 height 


图 像 高 度 的 属性 与 图 像 宽度 属性 类 似 ， 
同样 是 用 来 调整 图 像 的 大 小 的 。 可 以 用 
height 来 定义 图 片 元 素 的 高 度 。 语 法 结构 如 
下 所 示 。 

<img ste=" 图 片 路 径 " alt-" 文 本 内 容 " height-” ss I 
数字 值 " > et 

图 6-5 使 用 width 属性 定义 图 片 宽度 后 的 效果 

在 该 语法 中 ， 图 像 的 宽度 单位 是 像素 。 

如 果 在 使 用 属性 的 过 程 中 ， 只 设置 了 高 度 或 宽度 ， 则 另外 一 个 参数 会 等 比例 变化 。 如 果 同 时 设 
置 两 个 属性 ， 且 缩放 比例 不 同 的 情况 下 ， 图 像 很 可 能 会 变形 ， 下 面 实例 同时 使 用 width 属性 和 
height 属性 。 其 代码 如 下 所 示 。 


img-height.html 
01 <body> 
<h3> 雷 峰 塔 </h3> 
<hr size=3> 
<br> 雷 峰 塔 原 建造 在 雷 峰 上 ， 位 于 杭州 西湖 南岸 南 屏山 日 慧 峰 下 净 慈 寺前 。 雷 峰 为 南 屏山 向 北 伸 
展 的 余 脉 ， 濒 湖 勃 然 隆起 ， 林 木 葱郁 。 但 民间 因 塔 在 雷 峰之 上 ， 均 呼 之 为 雷 峰 塔 。 原 塔 共 七 层 ， 重 檐 飞 栋 ， 窗 
户 洞 达 ， 十 分 壮观 。<br> 
02 <center> 
03 <img sre=" pic.JPG" height=160> 
04 <img sre=" pic.JPG"width=160 height=160> 
05 </center> 
06 </body> 
在 该 实例 中 ，03 行 中 定义 第 一 张 图 片 的 高 度 为 160 像素 ，04 行 中 第 二 张 图 片 的 高 度 和 宽 
度 都 为 160 像素 。 其 运行 后 的 显示 效果 ， 如 图 6.6 所 示 。 第 一 张 图 只 设置 高 度 ， 宽 度 默 认 ， 所 
以 在 页 面 中 按 原 图 比例 自动 调整 。 第 二 张 图 片 由 于 在 <img> 元 素 中 ， 定 义 的 高 度 和 宽度 与 原 图 
片 的 比例 不 相同 ， 所 以 图 片 产生 了 变形 的 现象 ， 在 图 6-6 中 以 正方 形 图 片 出 现在 页 面 中 。 
定义 了 图 片 的 宽度 和 高 度 后 ， 如 果 图 片 不 能 显示 的 时 候 ， 代 蔡 图 片 的 文本 ,会 出 现在 图 片 
宽度 和 高 度 定义 的 区 域内 。 并 且 当 alt 属性 中 定义 的 文本 内 容 高 度 大 于 图 片 大 小 时 ， 超 出 的 部 
分 将 被 隐藏 其 实例 代码 如 下 所 示 。 


Lab img-heighttwo.html 
<body> 
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<img src="picjpg" alt="《 麦 田 里 的 守望 者 》 故 事 讲述 的 主人 公 是 16 岁 的 中 学 生 霍 尔 顿 。 考 尔 德 是 当代 美 
国文 学 中 最 早出 现 的 反 英 雄 形象 之 一 ， 霍 尔 顿 出 身 中 纽约 一 个 富裕 的 中 产 阶级 家 庭 。 学 校 里 的 老师 和 自己 的 家 
长 强迫 他 好 好 读书 ， 为 的 是 出 人 头 地 ， 以 便 将 来 买 辆 凯迪 拉克 ， 而 在 学 校 里 一 天 到 晚 干 的 ， 就 是 谈 女人 ， 酒 和 
性 ， 他 看 不 惯 周围 的 一 切 ， 根 本 没 心思 用 功 读书 ， 因 而 老 是 挨 罚 ， 到 他 第 四 次 被 开除 时 ， 他 不 敢 回 家 。 便 只 身 
在 美国 最 繁华 的 纽约 城 游荡 了 一 天 两 夜 ， 住 小 客 店 ， 竹 夜总会 滥 交 女友 他 在 电影 院 里 百 无 聊 赖 地 消磨 时 光 ， 糊 
里 糊涂 地 召 了 妓女 ， 情 不 自 禁 的 与 虚荣 的 女友 搂 搂抱 抱 ， 与 此 同时 ， 他 的 内 心 又 十 分 苦闷 ， 企 图 逃 出 虚伪 的 成 
人 世界 去 寻 批 纯洁 与 真理 的 经 历 与 感受 。 这 种 精神 上 无 法 调和 的 极度 矛盾 最 终 令 他 彻底 骨 溃 ， 躺 倒 在 精神 病院 


作者 塞 林 格 全 名 杰 罗 姆 。 大 卫 。 塞 林 格 ， 一 九 一 九 年 生 于 美国 纽约 城 ， 父 亲 是 做 于 酷 和 火腿 进口 生意 的 
犹太 商人 ， 家 境 相当 富裕 。 塞 林 格 十 五 岁 的 时 候 ， 被 父母 送 到 宾夕法尼亚 州 一 个 军事 学 校 里 住 读 ， 据 说 《麦田 
里 的 守望 者 》 中 关于 寄宿 学 校 的 描写 ， 很 大 部 分 是 以 那 所 学 校 为 背景 的 。 一 九 三 六 年 ， 塞 林 格 在 军事 学 校 毕业 ， 
取得 了 他 毕生 唯一 的 一 张 文 凭 。 从 一 九 四 OO 年 在 《小 说 》 杂 志 上 发 表 他 的 头 一 个 短篇 小 说 起 ， 到 一 九 五 一 
年 出 版 他 的 长 篇 小 说 《麦田 里 的 守望 者 》 止 ， 在 十 余年 中 他 共 发 表 了 二 十 多 个 短篇 ， 有 些 短篇 还 在 《老爷 》、 
《纽约 人 》 等 著名 刊物 上 发 表 ， 从 而 使 他 在 文学 界 有 了 一 点 点 名 气 。 成 名 后 他 隐居 到 乡下 ， 特 地 为 自己 造 了 一 
个 只 有 一 扇 天 窗 的 水 泥 斗 室 作 书房 ， 每 天 早晨 八 点 半 就 带 了 饭盒 入 内 写作 ， 直 到 下 午 五 点 半 才 出 来 ， 家 里 任何 
人 都 不 准 进去 打扰 他 ; 如 有 要 事 ， 只 能 用 电话 联系 。 他 写作 的 过 程 据 说 还 十 分 艰苦 ， 从 《麦田 里 的 守望 者 》 出 
版 后 ， 他 写作 的 进度 越 来 越 慢 ， 十 年 只 出 版 三 个 中 篇 和 一 个 短篇 ， 后 来 甚至 不 再 发 表 作品 。 偶 尔 有 幸 见 过 他 的 
人 透露 说 ， "width="300" height="300" /> 


</body> 
该 代码 运行 后 ， 显 示 效 果 如 图 6.7 所 示 。 
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文件 到 轴 狂 开 ) 寺 运 收 蕊 W 工具 DJ ”| 圳 
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中 学 生 翟 尔 顿 考 尔 壬 是 当代 美国 文学 中 最 早出 现 
人 
畦 峰 塔 原 建造 在 备 峰 上， 位 于 杭州 西湖 南岸 南 好 好 读 节 ， 为 的 是 出 人 头 地 ， 以便 档 来 习 呈 这 拉 
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茜 的 与 虚荣 的 女友 搂 挡 掏 抱 ,与 此 同时 ， 届 的 内 心 
又 十 分 苦 间 ， 全 图 过 出 庶 人 的 成 人 世界 去 寻 批 纯洁 
与 更 的 经 历 与 二 受 。 这 种 畏 神 上 无 法 和 的 极度 
Ny 终 令 他 彻底 骨 资 ， 生 倒 在 精 
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犹太 商人 ， 宗 境 相 当 富裕 。 奔 林 格 - » 
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到 加 
BE | BE np 4 


图 6-6 图 片 同 时 定义 了 高 度 和 宽度 后 的 效果 图 6-7 当 含 有 大 量 葵 换 文本 时 的 显示 效果 


6.1.5 ”图 像 元 素 的 边框 属性 border 


在 制作 图 像 的 时 候 , 一 般 用 图 像 元 素 的 边框 属性 border 来 定义 图 片 的 边框 。 普通 的 图 片 元 
素 在 显示 时 是 没有 边框 的 ， 可 以 通过 border 属性 为 图 像 添加 边框 。 语 法 结构 如 下 。 


<img src=" 图 像 文件 的 地 址 " border=" 图 像 边 框 的 宽度 "> 


在 该 语法 中 ，src 是 图 像 文件 的 地 址 ， 是 不 可 缺少 的 。border 的 单位 是 像素 。 下 面 一 起 来 
看 看 使 用 border 元 素 的 实例 ， 其 代码 如 下 所 示 。 
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瑟 桔 3 到 img-border html 


01 <body> 
<h3> 狼 (Beauty and the Beast)</h3> 
<hr size=3> 
狼 是 自然 界 进化 的 最 成 功 的 动物 ， 也 是 最 有 纪律 和 团队 合作 精神 的 动物 。 狼 有 很 强 的 合作 意识 和 团 
队 合作 精神 ， 这 些 都 值得 我 们 学 习 。 
<br> 
02 <center> 
03 ”<img src=" 狼 jpg"> 
04 <img src="jpg" border="15"> 


05 </center> 

06 </body> 

该 实例 中 ，03 行 中 先 直接 引用 了 一 张 图 片 做 对 
照 ，04 行为 了 使 图 片 的 边框 显示 得 更 加 明显 , 定义 了 [zww wap nv www Jau ww。 
一 个 很 粗 的 边框 。 代 码 运行 后 ， 其 显示 效果 如 图 68 | 时 
所 示 。 狼 《Beauty and the Beast) 是 


天时 化 的 于 上 2 的 玖 其 二 有 各 估 和 让 全 人 


6 .1 .6 代替 图 片 的 长 文本 属性 longdesc 的 : 多 有 很 强 的 台 作 意识 如 团队 合作 精神 ， 这 些 部 全 
有 时 候 要 用 文本 来 代 蔡 图 片 。 代 蔡 图 片 的 长 文本 人 
属性 longdesc 用 来 定义 代替 图 片 的 文本 。langdesc 属 
性 和 alt 属性 的 功能 基本 相同 , 也 可 以 用 来 定义 图 片 的 
注释 。 语 法 结构 如 下 所 示 。 
<img src=" 图 片 路 径 " langdesc=" 蔡 代 文本 路 径 " /> 
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当代 蔡 文 本 长 度 超过 1024 字符 时 ， 可 以 使 用 图 6.8 ”图片 定 义 border 属性 后 的 显示 效果 
longdesc 属性 ， 定 义 一 个 链接 文件 来 显示 替代 文本 。 
目前 常用 的 浏览 器 还 不 支持 该 属性 。 因 为 浏览 器 还 不 支持 该 属性 ， 所 以 就 不 做 实例 讲解 了 。 


6.1.7 上 下 边 距 属性 vspace 

用 图 像 元 素 的 上 下 边 距 属性 vspace 来 使 图 片 元 素 与 相 邻 的 内 容 在 垂直 方向 上 分 开 一 段 距 
离 。 语 法 结构 如 下 所 示 。 

<img src=" 图 片 路 径 " alt=" 文 本 内 容 " vspace=" 上 下 距离 " 广 

其 中 数字 值 的 实际 单位 是 像素 。 下 面 是 一 个 使 用 vspace 属性 的 实例 。 其 代码 如 下 所 示 。 


img-vspace.html 
01 <body> 
02 ”<img src=" 狼 .jpg" vspace="50"> 
狼 是 群居 性 极 高 的 物种 。 一 群 狼 的 数量 大 约 在 5 到 12 只 之 间 ， 在 冬天 寒冷 的 时 候 最 多 可 到 四 十 只 左 
右 ， 通 常 以 家 庭 为 单位 的 家 庭 狼 由 一 对 优势 对 偶 领 导 ， 而 以 兄弟 姐妹 为 一 群 的 则 以 最 强 一 头 狼 领导 。 狼 群 有 领 


让 人权 


图 像 元 素 


域 性 ， 且 通常 也 都 是 其 活动 范围 ， 群 内 个 体 数量 若 增 加 ， 领 域 范围 会 缩小 。 群 之 间 的 领域 范围 不 重 辣 ， 会 以 
声 向 其 他 群 宣告 范围 。 幼 狼 成 长 后 ， 会 留 在 群 内 照顾 弟妹 ， 也 可 能 继承 群 内 优势 地 位 ， 有 的 则 会 迁移 出 去 (大 都 
为 雄 狼 ) 而 还 有 一 些 情况 下 会 出 现 迁 徙 狼 ， 以 百 来 头 为 一 群 ， 有 来 自 不 同 家庭 等 级 的 各 类 狼 ， 各 个 小 团体 原 狼 首 
领会 成 为 头 狼 ， 头 狼 中 最 出 众 的 则 会 成 为 狼 王 。 野生 的 狼 一 般 可 以 活 12 一 16 年， 人工 饲 养 的 狼 有 的 可 以 活 到 
二 十 年 左右 。 奔跑 速度 极 快 ， 可 达 五 十 五 公里 左右 ， 持 久 性 也 很 好 。 它 们 有 能 力 以 速度 10 公里 /小 时 (六 英里 ) 
长 时 间 奔 跑 ， 并 能 以 高 达 近 65 公里 /小 时 速度 ( 40 英里 ) 追 猫 冲刺 。 如 果 是 长 跑 ， 它 的 速度 会 超过 猎豹 。 智 能 
颇 高 ， 可 以 气味 、 叫 声 沟通 。 狼 是 以 肉食 为 主 的 杂食 性 动物 ,是 生物 链 中 极 关键 的 一 节 。 
03 </body> 


在 该 实例 中 ，02 行 中 定义 了 上 边 图 片 元 素 的 上 下 边 
距 属性 值 为 50 像素 。 代 码 运行 后 ， 图 片 和 文字 之 间 就 会 
有 50 像素 的 差距 。 其 显示 效果 如 图 6-9 所 示 。 


6.1.8 图 像 元 素 的 左右 边 距 属性 hspace 


图 像 元 素 的 左右 边 距 属性 hspace 用 来 使 图 片 元 素 与 
相 邻 的 内 容 ， 在 水 平方 向 上 分 开 一 段 距离 。 语 法 结构 如 。 | 3 生殖 


下 所 示 。 
<img sre=" 图 片 路 径 "” hspace= "数字 值 " /> 图 6-9 设置 上 下 边 距 后 的 效果 
其 中 数字 值 的 实际 单位 是 像素 。 下 面 是 一 个 使 用 hspace 属性 的 实例 。 其 代码 如 下 所 示 。 
img-hspace.html 


01 <body> 


<hr size=2> 

中 国 是 狼 种 群 数量 最 大 的 国家 之 一 。 
02 ”<img src=" 狼 .jpg" border="4"> 

<br><br 

中 国 曾 是 狼 种 群 数量 最 大 的 国家 之 一 . 
03 ”<img sre=" 狼 .jpg" border="4" hspace="50"> 
04 <body> 


在 该 实例 中 ，02 行 中 第 一 张 图 和 文字 之 间 的 距离 。 名 ee ee sa 
为 默认 ，03 行 中 第 二 张 图 中 定义 了 图 片 和 文字 的 左右 
边 距 属性 值 为 30 像素 。 代 码 运行 后 ， 其 显示 效果 如 图 
6-10 所 示 。 

从 图 6-10 中 可 以 看 出 下 图 的 文字 和 图 片 之 间 有 较 
为 明显 的 距离 。 


中 国 是 妇 种 科 数 且 虹 大 的 国家 之 一 


6.1.9 图 像 元 素 的 对 齐 属性 align 
图 像 和 文字 之 间 的 排列 方式 可 以 通过 图 像 元 素 的 。 | = 


EE ll i > 


对 齐 属性 align 来 调整 。 图 像 的 绝对 对 齐 方式 与 相对 文 。 图 510 定义 hepace 属性 后 的 显示 效果 
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字 的 对 齐 方式 不 同 ， 绝 对 对 齐 方式 包括 左 对 齐 、 右 对 齐 和 居中 对 齐 3 种 ， 而 相对 文字 对 齐 方式 
则 是 指 图 像 与 一 行文 字 的 相对 位 置 。 语 法 结构 如 下 所 示 。 


<img sre=" 图 像 文件 的 地 址 " align=" 相 对 文字 的 对 齐 方式 "> 


JS 


也 注意 
align 属性 的 取 值 比较 复杂 。 其 可 以 分 为 3 个 部 分 ， 一 部 分 是 标准 中 规定 的 值 ; 男 


一 部 分 是 Netscape 增加 的 值 ; 还 有 一 部 分 是 阳 中 增加 的 值 . 标准 中 规定 的 值 如 表 6-2 
所 示 。 
KD 
表 6-2 align 属性 的 取 值 及 含义 
align 取 值 表示 的 含义 
top 把 图 像 的 项 部 和 同行 的 最 高 部 分 对 齐 ( 可 能 是 文本 的 顶部 ， 也 可 能 是 图 像 的 项 部 ) 
middle 把 图 像 的 中 部 和 行 的 中 部 对 齐 ( 通 常 是 文本 行 的 基线 ， 并 不 是 实际 的 行 的 中 部 ) 
bottom 把 图 像 的 底部 和 同行 文本 的 底部 对 齐 
texttop 把 图 像 的 项 部 和 同行 中 最 高 的 文本 的 项 部 对 齐 ， 常 用 于 Netscape 中 


absmiddle 把 图 像 的 中 部 和 同行 中 最 大 项 的 中 部 对 齐 ， 常 用 于 Netscape 中 


baseline 


把 图 像 的 底部 和 文本 的 基线 对 齐 ， 常 用 于 Netscape 中 


absbottom | ”把 图 像 的 底部 和 同行 中 的 最 低 项 对 齐 ， 常 用 于 Netscape 中 


left 使 图 像 和 左边 界 对 齐 (文本 环绕 图 像 ) 
right 使 图 像 和 右边 界 对 齐 (文本 环绕 图 像 ) 
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下 面 分 别 通过 实例 ， 演 示 各 个 属性 的 显示 效果 。 其 代码 如 下 所 示 。 


| 例 程 6-11 | img-align.html 


01 


02 


03 


<body> 

<font size=4> 作 为 基准 的 文字 </font> 
<!-- 图 像 的 底 端 与 文字 的 底 端 对 齐 -> 

<img src=" 狼 ,jpg" width=75 align="bottom"> 
<!-- 图 像 的 中 间 与 文字 的 中 间 线 对 齐 -> 

<img src=" 狼 jpg" width=75 align="texttop"> 
<!-- 图 像 的 顶端 与 文字 的 顶端 对 齐 -> 

<img src=" 狼 ,jpg" width=75 align="middle"> 
<!-- 图 像 的 中 间 线 与 文字 的 中 间 线 对 齐 -> 
<img src=" 狼 ,jpg" width=75 align="baseline"> 
<!-- 图 像 的 底 端 与 文字 的 底 端 对 齐 -> 

<img src=" 狼 ,jpg" width=75 align="absmiddle"> 
<br> 

<hr size=2> 

下 面 是 图 像 位 于 文字 左 侧 的 效果 : <br><br> 
<img src=" 狼 jpg" width=75 align="left"> 这 里 讲解 的 是 关于 图 像 与 文字 的 相对 位 置 的 设置 , 文字 作为 图 


图 像 元 素 


像 对 齐 效果 的 参照 物 。 如 果 将 图 像 的 对 齐 方式 设置 成 left 或 者 right， 图 像 则 会 与 文字 进行 环绕 显示 。 这 是 图 像 
设置 为 left 的 效果 。<br><br><br> 
下 面 显示 图 像 位 于 文字 右 侧 的 效果 : <br><br> 

04 <img src=" 狼 jpg" width=75 align="right"> 这 里 讲解 的 是 关于 图 像 与 文字 的 相对 位 置 的 设置 ， 文 字 作 为 
图 像 对 齐 效果 的 参照 物 。 如 果 将 图 像 的 对 齐 方式 设置 成 let 或 者 right， 图 像 则 会 与 文字 进行 环绕 显示 。 这 是 图 
像 设置 为 right 的 效果 。 

<br></br> 

05 </body> 


01 行 中 条 目 定义 了 文字 与 图 像 的 相对 垂直 位 置 的 变化 效果 ，02 行为 水 平 线 ，03 行 中 定义 
左 对 齐 ，04 行 定义 了 右 对 齐 的 效果 。 代 码 运 行 后 ， 显 示 效 果 如 图 6-11 所 示 。 


汉 设 置 用 像 与 文字 的 相对 位 置 - icrosoft Internet Explorer 何 
文件 名“ 闹 得 @) 查看 o， 收 证 中 工具 C) 帮助 0 | 


Om -© OOD Wm | 


HE) [E] n wy mementswswnu eta Mal Ei EE 
作为 基准 的 文字 二 团 同 网 
下 画 是 图 像 位 于 文字 左 例 的 效果 ， 


及 里 讲解 的 是 关于 图 像 与 文字 的 相对 位 置 的 设置 ， 文 字 作 闫 区 像 对 齐 效果 的 参 辕 物 。 如 果 将 图 
的 对 齐 方式 设置 成 le8 或 者 naht， 图 像 则 会 与 文字 进行 环绕 显示 。 这 是 图 像 设置 为 le 的 效果 。 


| 下 面 显示 图 像 性 于 文字 右 侧 的 效果 


这 里 讲解 的 是 关于 图 像 与 文字 的 相对 位 置 的 设置 ， 文 字 作 为 图像 对 齐 效果 的 参照 
的 ep EE nat 图 像 则 会 与 文字 进行 环绕 显示 。 这 是 图 像 设置 


司 
闸 普 CT 到 


图 6-11 图 像 的 对 齐 属性 


6.1.10 ”图 像 服 务 器 端 映射 属性 ismap 


用 图 像 服务 器 端 映射 属性 ismap 来 将 图 像 的 坐标 传递 给 相应 的 服务 器 端 处 理 程序 。 但 是 注 
意 ismap 只 可 以 用 在 <a> 标签 标识 的 超 链接 里 面 。 语 法 结构 如 下 所 示 。 
<a hre 合 "相应 的 程序 "> 
<img src=" 图 片 路 径 " ismap=ismap 亡 
</a> 


注意 <img> 元 素 必须 使 用 在 <a> 元 素 之 中 。 
下 面 是 一 个 ismap 属性 的 实例 。 其 代码 如 下 所 示 。 
img-ismap.html 


01 <body> 
02 <ahref="link.cgi"> 
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03 ”<img src=-" 狼 jpg" ismap="ismap" 亡 

04 </a> 

05 </body> 

03 行 中 使 用 了 图 像 服务 器 端 映 射 属性 ismap， 当 用 户 在 图 像 上 单 击 了 某 处 时 ， 浏 览 器 会 自 
动 把 鼠标 的 x、y 位 置 (相对 于 图 像 的 左上 角 ) 发 送 到 服务 器 端 。 特 殊 的 服务 器 端 软 件 (在 本 例 中 
是 link.cgi 程序 ) 可 以 根据 这 些 坐 标 来 做 出 响应 。 


6.1.11 图 像 服 务 器 端 映射 属性 usemap 


图 像 服 务 器 端 映射 属性 usemap 用 来 通过 相应 的 <map> 和 <area> 元 素 , 在 图 片 的 相应 区 域 定 
义 一 个 超 链 接 (关于 <map> 和 <area> 元 素 以 及 usemap 属性 的 详细 应 用 ， 请 参照 第 8 章 )。 语 法 结 
构 如 下 所 示 。 

<img src=" 图 片 路 径 " alt=" 图 片 " usemap="#map" 亡 


usemap 属性 必须 和 <map> 元 素 等 一 起 使 用 。 下 面 是 一 个 使 用 usemap 属性 的 实例 。 其 代码 
如 下 所 示 。 


img-usemap.html 
01 <body> 
02 <img sre="pic.jpg" alt=" 图 片 " usemap="#Map" /> 
03 </body> 


了 所 图 像 的 格式 


在 网 页 中 经 常 能 看 到 大 量 的 精美 图 片 。 随 着 现在 数码 技术 的 发 展 ， 人 们 也 经 常用 数码 相机 
拍照 ， 当 把 数码 相片 移动 到 电脑 中 时 ， 用 鼠标 右 击 属性 ， 就 会 看 到 图 片 格式 的 说 明 。 常 见 的 图 
片 格式 有 JPEG 格式 、GIF 格式 和 PNG 格式 。 这 些 格式 在 制作 网 页 的 时 候 经 常用 到 ， 下 面 一 起 
了 解 它们 的 特点 。 


6.2.1 JPEG 格式 


JPEG 格式 的 图 片 是 最 常见 也 是 使 用 最 多 的 图 片 ， 人 们 用 数码 相机 照 出 来 的 图 片 一 般 就 是 
这 种 格式 。 这 种 格式 的 图 片 的 好 处 在 于 各 种 浏览 器 都 能 很 好 的 支持 ， 同 时 可 以 方便 地 压缩 图 片 
的 大 小 ， 还 可 以 很 好 地 显示 颜色 复杂 、 质 量 精细 度 要 求 很 高 的 图 片 内 容 。 但 是 在 处 理 大 面积 的 
颜色 块 时 ， 这 种 图 片 可 能 会 出 现 明显 的 压缩 痕迹 。 

JPEG 格式 的 图 片 的 图 片 用 途 很 广 ， 在 网 页 中 看 到 的 大 部 分 图 片 都 是 这 种 格式 ， 下 面 是 一 
个 JPEG 格式 的 图 片 ， 如 图 6-12 所 示 。JPEG 格式 的 图 片 的 后 缀 名 是 “jpg”。 
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6-12 JPEG 格式 的 图 片 


6.2.2 GIF 格式 


GIF 格式 即 图 形 交 换 格式 (Graphics Interchange Format 的 简写 )。 这 种 格式 的 图 片 在 任何 浏 
览 器 中 均 能 正常 显示 ， 所 以 在 网 页 设计 中 使 用 的 最 多 。 不 过 GIF 格式 的 图 片 只 能 够 使 用 256 种 
色彩 ， 所 以 不 适合 显示 色彩 比较 丰富 的 图 像 内 容 ( 如 照片 等 )。GIF 格式 的 图 片 具有 3 个 比较 突 
出 的 特性 。 

1. 可 以 设置 背景 透明 


GIF 格式 的 图 片 可 以 设置 背景 的 透明 。 它 不 像 其 他 格式 的 图 片 一 样 显示 带 有 白色 背景 的 矩 
形 框 。 因而 可 以 显示 不 规则 的 图 形 , 这 一 点 在 制作 网 页 时 非常 有 用 ， 可 以 通过 透明 的 背景 格式 ， 
设置 页 面 中 的 图 标 、logo 等 。 

2. 可 以 制作 简单 的 动画 

可 以 使 用 相应 的 工具 制作 简单 的 GIF 格式 的 动画 , 这 种 格式 的 动画 不 需要 安装 任何 多 余 的 
插件 即 可 正常 显示 ， 而 且 可 以 方便 地 放置 在 页 面 的 任何 位 置 。 


3. 采用 隔行 扫描 的 显示 方式 


GIF 格式 的 图 片 由 于 具有 隔行 扫描 的 效果 , 所 以 在 
显示 时 ， 不 会 像 JPEG 等 其 他 格式 的 图 片 一 样 ， 从 上 到 
下 像 打 开 一 个 卷轴 一 样 显示 出 来 , 而 是 像 打开 百叶 窗 一 
样 显现 出 来 ， 同 时 会 出 现 一 种 从 模糊 到 清晰 的 显示 效 we 
果 。 其 在 显示 速度 上 有 着 明显 的 优势 。 

但 是 使 用 GIF 格式 也 会 带 来 一 些 问 题 ， 就 是 图 片 
文件 的 大 小 会 增加 , 过 多 地 使 用 GIF 格式 的 动画 , 可 能 
会 增加 页 面 加 载 的 时 间 。 下 面 是 一 个 GIF 格式 的 动画 图 
片 ， 如 图 6-13 所 示 。GIF 格式 的 图 片 的 后 级 名 为 “.gif”。 


图 6-13 GIF 格式 的 图 片 


he 
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6.2.3 PNG 格式 


PNG 格式 的 图 片 具有 压缩 比 高 ， 生 成 文件 容量 小 的 优点 。 因 而 能 很 好 地 保证 图 片 不 失 
真 ， 并 且 具 有 GIF 和 JPG 二 者 的 优点 ， 存 储 形式 丰富 ， 兼 有 GIF 和 JPG 的 色彩 模式 。 

PNG 格式 图 片 的 另 一 个 特点 就 是 能 把 图 像 文件 压缩 到 极限 以 利于 网 络 传输 ， 但 又 能 保留 
所 有 与 图 像 品质 有 关 的 信息 ， 因 为 PNG 是 采用 无 损 压缩 方式 来 减少 文件 的 大 小 ， 这 一 点 与 牺 
牲 图 像 品 质 以 换取 高 压缩 率 的 JPG 有 所 不 同 。 

它 的 第 3 个 特点 是 显示 速度 很 快 ， 只 需 下 载 1/64 的 图 像 信息 就 可 以 显示 出 低 分 辩 率 的 预 
览 图 像 ， 不 过 这 种 格式 的 图 片 不 支持 动画 应 用 效果 ， 因 而 它 的 应 用 受到 一 定 的 限制 。 下 面 是 一 
个 PNG 格式 的 动画 图 片 ， 如 图 6-14 所 示 。PNG 格式 的 图 片 的 后 缀 名 为 “. PNG”。 


人 


6-14 ”PNG 格式 的 图 片 


本 章 习 题 


一 、 选 择 题 


1， 下 面 对 JPEG 格式 描述 不 正确 的 一 项 是 ( )。 

A. 照片 、 油 画 和 一 些 细腻 、 讲 求 色彩 浓淡 的 图 片 常 采用 JPEG 格式 
B. JPEG 支持 很 高 的 压缩 率 ， 因 此 其 图 像 的 下 载 速度 非常 快 

C. 最 高 只 能 以 256 色 显示 的 用 户 可 能 无 法 观看 JPEG 图 像 

D. 采用 JPEG 格式 对 图 片 进 行 压缩 后 ， 还 能 再 打开 图 片 ， 然 后 对 它 重新 整 饰 、 编 辑 、 压 缩 
2. 有关 网 页 中 的 图 像 的 说 法 不 正确 的 是 ( )。 

A. 网 页 中 的 图 像 并 不 与 网 页 保存 在 同一 个 文件 中 ， 每 个 图 像 单 独 保存 
B.HIML 语言 可 以 描述 图 像 的 位 置 、 大 小 等 属性 

C. HTML 语言 可 以 直接 描述 图 像 上 的 像素 

D. 图 像 可 以 作为 超级 链接 的 起 始 对 象 

3. 以 下 关于 JPEG 图 像 格 式 中 ， 错 误 的 是 ( )。 

A. 适合 表现 真 彩色 的 照片 。 
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B. 最 多 可 以 指定 1024 种 颜色 。 
C. 不 能 设置 透明 度 。 
D. 可 以 控制 压缩 比例 。 


i 


1. 在 网 页 中 插入 背景 图 案 (文件 的 路 径 及 名 称 为 /img/bgjpg) 的 语句 是 

2. 设置 文字 的 颜色 为 红色 的 标记 格式 是 9 

3， 设置 颜色 可 以 用 颜色 的 英文 名 称 ， 也 可 用 。 

4. 插入 图 片 <img src- "图形 文件 名 "> 标记 符 中 的 sre 英文 单词 是 5 

5， 设 定 图 片 边框 的 属性 是 

6. 设 定 图 片 高 度 及 宽度 的 属性 是 

7. 设 定 图 片上 下 留 空 的 属性 是 ; 设 定 图 片 左右 留 空 的 属性 是 s 

8， 为 图 片 添加 简要 说 明文 字 的 属性 是 5 

9. 已 知 站 点 文件 夹 结构 如 图 6-15 所 示 ， 要 在 interesthtm 这 个 网 页 中 插入 sunset.gif， 应 
使 用 语句 。 


日 名 inages 
国 city.gif 
国 frsntpag.gif 
围 sunset. gif 


图 index. hta 
和 外 interest 
峰 interest.hta 
和 favorite 
日 息 photo 


图 6-15 站 点 文件 夹 结构 图 
三 、 实 战 练习 


1. 在 页 面 链接 一 张 图 片 ， 并 设置 它 的 边框 、 高 度 和 宽度 。 
2， 选择 一 个 图 片 ， 并 用 在 页 面 中 添加 一 条 水 平 线 来 做 基准 ， 设 置 图 片 的 各 种 对 齐 属性 。 
3， 选择 一 个 图 片 ， 并 在 页 面 中 设置 它 的 边 距 属性 。 
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在 制作 页 面 的 过 程 中 ， 会 用 到 各 种 表格 来 对 页 面 进行 排版 。 如 何 把 表格 美观 、 实 用 地 放 在 
要 制作 的 页 面 中 呢 ? 本 章 将 讲解 表格 元 素 及 其 相关 元 素 的 属性 和 应 用 。 


避 、 本 章 主要 内 容 有 : 


@ 重点 掌握 表格 元 素 各 种 属性 的 特点 和 用 法 。 
@ 能够 按照 页 面 的 要 求 制作 表格 。 

@ 掌握 表格 的 边界 属性 的 各 个 特点 。 

@ ”通过 本 章 学 习 能 熟练 制作 表格 。 
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7.1 | 表格 元 素 的 结构 


与 其 他 元 素 不 同 ， 在 表格 中 一 般 通 过 3 个 标记 来 构建 ， 分 别 是 表格 标记 、 行 标记 和 单元 格 
标记 。 其 中 表格 标记 是 <table> 和 </table>， 表 格 的 其 他 各 种 属性 都 要 在 表格 的 开始 标记 <table> 
和 表格 的 结束 标记 </table> 之 间 才 有 效 。 下 面 首先 介绍 如 何 创建 表格 ， 其 语法 如 下 所 示 。 


该 语法 中 <table> 标 记 和 </table> 标 记分 别 标志 着 一 个 表格 的 开始 和 结束 ; 而 <t> 和 </tr> 则 分 
别 表示 表格 中 一 行 的 开始 和 结束 ， 在 表格 中 包含 几 组 
<tr>...</tr>，, 就 表示 该 表格 为 几 行 ， <td> 和 </td> 表 示 一 
个 单元 格 的 起 始 和 结束 ， 也 可 以 说 表示 一 行 中 包含 了 
几 列 。 

表格 元 素 在 没有 定义 任何 属性 时 ， 是 没有 表现 效 
果 的 。 例 如 只 用 语法 结构 中 定义 的 表格 ， 在 页 面 中 显 
示 其 效果 如 图 7-1 所 示 。 


下 面 对 表格 元 素 中 必须 使 用 的 各 个 具体 元 素 进行 
详细 讲解 。 7-1 表格 元 素 没 定义 属性 时 的 显示 效果 


习 无 标题 文档 - Wicrosoft Taterseeo 中 | ] 
ET TEAEEGE 
四 争 - 团 -加 辐 的 | 万 购 “ 
MED everowts wr] 加 加 wa [WR 

;| 


Ry copter 


7.1.1 表格 <table> 


表格 元 素 <table> 用 来 在 页 面 中 定义 一 个 表格 。 但 是 <table> 元 素 并 不 能 单独 地 定义 一 个 完整 
的 表格 ， 而 是 必须 要 在 其 中 使 用 <tr> 元 素 以 及 其 他 的 元 素 ， 才 能 共同 构成 一 个 完整 的 表格 。 语 
法 结构 如 下 所 示 。 


<table>……</table> 
下 面 是 一 个 使 用 <table> 元 素 的 实例 。 其 代码 如 下 所 示 。 
table html 


01 <body> 
02 <table> 


<t> 
<th> 表 格 内 容 </th> 
04 </t> 


<t> 
<th> 表 格 内 容 </th> 
06 < 
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07 </table> 
08 </body> 


该 实例 中 ， 在 03 和 07 行 之 间 的 <table> 元 素 中 ， 使 用 了 <tr> 和 <th> 元 素 。 其 运行 后 的 显示 
效果 ， 如 图 7-2 所 示 。 


EEEEE3 
文件 四 编 得 思 ) 查看 WD 收藏 ) 工具 帮助 四 了 
QO WHIPs wm ” 
续 娃 | 名 ]D: Wty Docwmerts\oT\intitled-2 htal ESE :Bd 
表格 内 容 
表格 内 容 
到 
EE TT mr 用 


图 7-2 使 用 <table> 元 素 的 显示 效果 
<table> 元 素 中 可 以 使 用 的 所 有 属性 如 表 7-1 所 示 。 


表 7-1 <table> 元 素 的 所 有 属性 


属性 名 称 写 法 
文本 显示 方向 属性 dir 
指定 语言 属性 lang 
类 属性 class 
定义 级 联 样式 属性 style 
对 齐 属 性 align 
标题 属性 title 
取消 自动 换行 属性 nowra 
标记 属性 id 
背景 颜色 属性 bgcolor 
背景 图 片 属 性 background 
边框 属性 border 
高 度 属性 height 
宽度 属性 width 
左右 边 距 属 性 hspace 
上 下 边 距 属性 pace 
边框 颜色 属性 bordercolor 
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( 续 表 ) 
属性 名 称 3 
暗 边 框 属性 bordercolordack 
亮 边 框 属性 bordercolorright 
表格 边框 属性 frame 
表格 单元 格 边框 属性 mles 
表格 单元 格 间距 属性 cellspacing 
单元 格 补 白 属性 cellspadding 
列 数 属性 cols 
扩展 属性 
7.1.2 行 <tr> 


表格 元 素 <table> 用 来 在 页 面 中 定义 一 个 表格 。 但 是 <table> 元 素 并 不 能 单独 地 定义 一 个 完整 
的 表格 ， 而 是 必须 要 在 其 中 使 用 <tr> 元 素 及 其 他 的 元 素 ， 这 样 才能 共同 构成 一 个 完整 的 表格 。 
其 语法 结构 如 下 所 示 。 


<table> 


</table> 


<tr> 元 素 必须 在 <table> 元 素 中 才能 使 用 。 
下 面 是 一 个 使 用 <tr> 元 素 的 实例 。 其 代码 如 下 所 示 。 


二 tr-html 
01 <body> 
02 ”<h3> 这 是 一 个 表格 : </h3> 
03 <table> 
04 <t> 
<td> 第 一 行 中 的 第 一 个 单元 格 </td> 
<td> 第 一 行 中 的 第 二 个 单元 格 </td> 
05 </t> 
06 <t> 
<td> 这 是 表格 的 第 二 行 </td> 
<td> 第 二 行 中 的 第 二 个 单元 格 </td> 
07 </t> 
08 </table> 
09 </body> 


该 实例 中 ，04 到 07 行使 用 <tr> 元 素 定义 了 两 行内 容 。 其 中 在 <tr> 元 素 中 定义 了 <td> 元 素 。 
其 运行 后 的 显示 效果 ， 如 图 7-3 所 示 。 
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各 表格 元 素 - Wicrosoft Iaternet Ixplerer IE 
文件 如 编 加 中 可 看 WD 收藏 ) 工具 中 下 助 吕 E33 


OO IN| Pur Wen | "| 


ED ea 
这 是 一 个 表格 : = 


第 一 行 中 的 第 一 个 单元 格 第 一 行 中 的 第 二 个 单元 格 
这 是 表格 的 第 二 行 第 二 行 中 的 第 二 个 单元 格 


本 mm nll CZ 引 
图 7-3 ”使 用 <tr> 元 素 的 显示 效果 
<tr> 元 素 中 可 以 使 用 的 所 有 属性 如 表 7-2 所 示 。 
表 7-2 ” <tr? 元 素 的 所 有 属性 
属性 名 称 
文本 显示 方向 属性 dir 
指定 语言 属性 Lilig 
类 属性 Class 
定义 级 联 样式 属性 style 
对 齐 属性 align 
标题 属性 title 
取消 自动 换行 属性 nowrap 
标记 属性 id 
背景 颜色 属性 bgcolor 
垂直 对 齐 属性 valig 
边框 颜色 属性 bordercolor 
暗 边 框 属性 bordercolordack 
亮 边 框 属性 bordercolorright 


7.1.3 ”单元 格 <td> 


表格 元 素 


单元 格 元 素 <td> 用 来 定义 表格 的 单元 格 。 单 元 格 的 含义 就 是 表格 中 最 小 的 表格 单元 ， 也 就 
是 几 行 几 列 的 表格 中 的 一 个 单独 的 格子 。 同 样 <td> 元 素 不 能 单独 使 用 , 也 要 与 <table> 元 素 、<tr> 
元 素 等 共同 构成 一 个 完整 的 表格 。 其 语法 结构 如 下 所 示 。 
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</t> 
</table> 


<td> 元 素 必 须 在 <table> 元 素 的 <tr> 元 素 中 才能 使 用 。 
下 面 是 一 个 使 用 <td> 元 素 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 7-3| td.html 


01 <body> 
02 ”<h3> 这 是 一 个 表格 : </h3> 
03 <table> 


<tr> 
<td> 第 一 个 单元 格 </td> 
<td> 第 二 个 单元 格 </td> 
</r> 
<t> 
<td> 这 是 表格 的 第 二 行 </td> 
<td> 第 二 行 中 的 第 二 个 单元 格 </td> 
</> 
04 </table> 
05 </body> 


该 实例 中 ，03 到 04 行 之 间 的 <t> 元 素 中 ， 使 用 <td> 元 素 定义 了 4 个 单元 格 。 其 运行 后 的 
显示 效果 ， 如 图 7-4 所 示 。 


这 是 一 个 表格 : 


第 一 个 单元 格 。 “第 二 个 单元 格 
这 是 表 客 的 第 二 行 第 二 行 中 的 第 二 个 单元 客 


7-4 使 用 <td> 元 素 的 显示 效果 


7.2 <table> 元 素 的 属性 


通过 7.1 节 的 学 习 ， 读 者 已 经 对 表格 有 了 初步 的 认识 ， 在 这 一 节 中 ， 本 书 将 详细 讲解 关于 
<table> 元 素 的 各 种 相关 属性 。 


7.2.1 边框 属性 border 
7.1 节 讲 解 表格 元 素 的 时 候 ， 大 家 已 经 注意 到 页 面 中 看 不 到 边框 。 在 制作 过 程 中 ， 用 边框 
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属性 border 来 定义 表格 元 素 的 边框 宽度 。 如 果 单 元 格 中 没有 定义 其 他 的 边框 属性 ， 则 单元 格 将 
使 用 1 像素 的 边框 属性 值 。 语 法 结构 如 下 所 示 。 


<table border=" 数 字 值 ">…… ‘</table> 


其 中 数字 值 的 实际 单位 是 像素 。 下 面 是 在 <table> 元 素 中 使 用 border 属性 的 实例 。 其 代码 如 
下 所 示 。 


EE table-border.html 


01 <body> 
02 ”<h3> 这 是 第 一 个 表格 : </h3> 
03 <table border="3"> 


<tr> 
<td> 文 学 艺术 </td><td> 天 文 地理 </td><td> 政 治 历史 </td> 
</t> 
04 </table> 
<br 户 
05 ”<h3> 这 是 第 二 表格 : </h3> 
06 <table border="9"> 


< 自然 科学 hd 社会 科 学 cd><id> 斩 学 著作 cd 

07 a 

08 </body> 

在 该 实例 中 , 03 行 和 06 行 定义 了 两 个 边框 宽度 不 同 
的 图 片 ， 其 中 一 个 为 2 像素 宽 ， 一 个 为 10 像素 宽 ， 两 个 
表格 之 间 用 <br> 元 素 分 隔 。 其 运行 后 的 显示 效果 ， 如 图 
7-5 所 示 。 

从 图 7-5 可 以 看 出 , 此 时 虽然 没有 定义 单元 格 的 边框 
属性 , 但 是 单元 格 会 显示 1 像素 的 边框 , 同时 当 更 改 <table> 
元 素 的 边框 属性 值 时 ， 单 元 格 的 边框 并 不 发 生变 化 。 
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这 是 第 二 表格 : 


自然 科学 性 会 科学 暂 学 硕 作 


了 局 
疝 遂 训 I Wr Cmpoter 


7.2.2 ”水 平 对 齐 属性 align 图 7-5 ”边框 宽度 不 同 的 表格 的 表现 效 
在 制作 页 面 的 过 程 中 ， 用 水 平 对 齐 属性 align 来 定义 表格 的 对 齐 方式 。 根 据 实 际 情况 来 调 
整 表格 在 页 面 中 的 位 置 ，align 语法 结构 如 下 所 示 。 


<table align=" 属 性 值 ">……</table> 


align 属性 常用 的 取 值 有 left、right 和 center。 下 面 是 一 个 在 <table> 元 素 中 使 用 align 属性 的 
实例 。 其 代码 如 下 所 示 。 


LE table-align.html 


01 <body> 
02 <table align="center" width=400> 
03 ”<caption> 好 友 通讯 录 </caption> 
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<tr> 
<th> 姓 名 </th> 
<th> 地 址 </th> 
<th> 电 话 </th> 

</> 

<t> 
<td> 李 明 </td> 
<td> 山 西 省 大 同市 </td> 
<td>0000-12345678</td> 

</t> 

<tr> 
<td> 张 三 </td> 
<td> 河 北 石家庄 市 </td> 
<td>0000-12345678</td> 

</r> 

<tr> 
<td> 王 五 </td> 
<td> 河 南 郑州 市 </td> 
<td>0000-12345678</td> 

</> 

04 </table> 
05 <body> 


在 该 实例 中 , 03 和 04 行 的 内 容 是 表格 的 主体 ,并 


定义 了 表格 居中 显示 。 其 运行 后 的 显示 效果 ， 如 图 7-6 
所 示 。 


才 名 地 址 
李 明 。 山西 省 大 同市 0000-12345678 
i 张 三 河北 石家庄 市 0000-12345678 
7.2.3 高 度 属性 height 王 五 。 河南 郑州 市 0000-12345678 


页 面 制作 的 时 候 ， 还 需要 调整 表格 的 高 度 。 在 
HIML 中 ， 用 高 度 属性 height 来 定义 表格 的 高 度 。 如 
果 单 元 格 中 没有 定义 自身 的 高 度 属性 , 则 单元 格 将 根据 
自身 含有 的 内 容 自动 调整 高 度 ， 适 应 <table> 元 素 的 高 


度 。 语 法 结构 如 下 所 示 。 图 .6 定义 了 表格 对 齐 属性 后 的 表现 效果 
-<table height=" 数 字 值 ">……</table> 


其 中 数字 值 的 实际 单位 是 像素 。 下 面 是 在 <table> 元 素 中 使 用 height 属性 的 实例 。 其 代码 如 
下 所 示 。 


Wb table-height.html 


01 <body> 
02 <table border="1" width="100" height="100"> 


<t> 
<td> 唐 诗 三 百 首 </td> 
< 


<t> 
<td> 纸 上 得 来 终 觉 浅 ，</td> 
< 
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0 纸 上 得 来 终 党 浇 ， 绝 知 此 事 要 角 行 。<hd> 
< 

03 i 

04 </body> 

在 该 实例 中 , 02 行 中 定义 了 <table> 元 素 的 宽度 为 
100 像素 , 高 度 为 200 像素 , (宽度 属性 在 7.2.4 节 学 习 ) IE SEE | 
同时 在 单元 格 中 分 别 使 用 了 不 同 长 度 的 内 容 。 其 运行 [Ga 和 
后 的 显示 效果 ， 如 图 7-7 所 示 。 - - 

从 图 7-7 中 可 以 看 到 随 着 内 容 的 增多 ， 因 为 宽度 
不 变 ， 高 度 自 动 做 了 调整 。 


唐诗 三 百 首 


7.2.4 宽度 属性 width 


表格 的 宽度 也 是 页 面 制作 的 一 个 重要 内 容 ， 在 晶 
HTML 中 ， 用 宽度 属性 width 来 定义 表格 的 宽度 。 如。 se | 9 pew 4 
果 单 元 格 中 没有 定义 自身 的 宽度 属性 ， 则 单元 格 会 根 。 ”图 7-7 定义 了 表格 高 度 后 的 表现 效果 
据 自身 含有 的 内 容 自动 调整 宽度 来 适应 <table> 元 素 的 宽度 。 语 法 结构 如 下 所 示 。 


<table width=" 数 字 值 ">……</table> 


其 中 数字 值 的 实际 单位 是 像素 。 下 面 是 在 <table> 元 素 中 使 用 width 属性 的 实例 。 其 代码 如 
下 所 示 。 


Wb table-width.html 


01 <body> 
02 <table border="2" width="300"> 
<t> 
<td> 无 题 </td><td> 唐 代 诗 人 李商隐 作 </td><td> 身 无 彩 凤 双飞 翼 ， 心 有 灵犀 一 点 通 。</td> 
</tr> 
03 </table> 
04 </body> 


在 该 实例 中 , 02 行 中 定义 了 <table> 元 素 的 宽度 为 。 EEEEEEDEEEEECCCC 到 
300 像素 ， 同 时 在 3 个 单元 格 中 分 别 添加 了 不 同 长 度 ”| 厅 二 :加 加 而 | 万 二 wy 


的 内 容 。 其 运行 后 的 显示 效果 如 图 7-8 所 示 。 二] 1 wy Docments\o7 Woti ued hj EDS 到 到 
大 唐 代 诗 人 李 | 身 元 称 风 双飞 夏 , 心 有 | 
题 商 隐 作 “| 灵犀 一 点 通 。 


7.2.5 ”边框 颜色 属性 bordercolor 


为 了 使 表格 在 页 面 美观 ， 用 边框 颜色 属性 
bordercolor 来 定义 表格 边框 的 颜色 。 语 法 结构 如 下 
所 示 。 


Sy pe 


图 7-8 定义 了 表格 宽度 后 的 表现 效果 
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。 房 注 意 
<table> 元 素 中 定义 的 边框 颜色 ， 将 会 影响 到 单元 格 中 的 边框 颜色 ， 如 果 单 元 格 中 
没有 定义 自身 的 边框 颜色 ， 单 元 格 中 将 使 用 <table> 元 素 中 定义 的 边框 颜色 。 


<table border=" 数 字 值 " bordercolor=" 颜 色 值 ">…… ‘</table> 


当 使 用 bordercolor 属性 时 ， 要 定义 相应 的 border 属性 ， 否 则 bordercolor 属性 将 没有 表现 
效果 。 下 面 是 一 个 在 <table> 元 素 中 使 用 bordercolor 属性 的 实例 。 其 代码 如 下 所 示 。 


bE table-bordercolor html 


01 <body> 
02 <table border="8" width="400" height="400" bordercolor="#00FF00"> 


<h> 
<td> 学 科 科目 </td><td> 学 科学 时 </td> 
</t> 


<t> 
<td> 自 然 科学 </td><td>60 学 时 </td> 
A> 


<t> 
<td> 社 会 科学 </td><td>60 学 时 </td> 
</t> 
03 </table> 
04 </body> 
在 该 实例 中 , 02 行 中 定义 了 <table> 元 素 的 宽度 为 et _ 
400 像素 ， 高 度 为 400 像素 ， 为 了 明显 地 看 到 边框 颜 二 
色 ， 这 里 定义 边框 宽度 为 8 个 像素 ， 颜 色 为 绿色 。 其 et 
代码 运行 后 的 显示 效果 ， 如 图 7-9 所 示 。 


7.2.6 ”边框 暗 边线 属性 bordercolordark 


这 里 先 来 了 解 一 下 什么 是 边框 暗 边线 属性 ， 在 
<table> 元 素 中 边框 暗 边线 是 指 表格 的 右 侧 和 底部 的 边 
线 。 用 边框 暗 边线 属性 bordercolordark 来 定义 表格 边 
框 暗 边 线 的 颜色 。 语 法 结构 如 下 所 示 。 | 


PE 三 六 RE 


<table border=" 数 字 值 " bordercolordark=" 颜色 值 ">…… 
</table> 

在 这 个 语法 中 要 注意 ， 当 使 用 bordercolordark 属性 时 ， 要 定义 相应 的 border 属性 ， 否 则 
bordercolordark 属性 将 没有 表现 效果 。 下 面 是 一 个 在 <table> 元 素 中 使 用 bordercolordark 属性 的 
实例 。 其 代码 如 下 所 示 。 


7-9 定义 了 边框 颜色 属性 后 的 表现 效果 
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ER table-bordercolordark.html 


表格 元 素 


01 <body> 


02 <table border="8" width="400" height="400" bordercolor="#99FF99" bordercolordark="#000000"> 


<tr> 
<td> 自 然 科学 </td><td> 人 文科 学 </td> 
</t> 


<t> 
<td> 物 理化 学 等 知识 </td><td> 社 会 哲学 等 知识 </td> 
</t> 


03 </table> 

04 </body> 

在 该 实例 中 , 02 行 中 定义 了 <table> 元 素 的 宽 
度 为 400 像素 ， 高 度 为 400 像素 ， 边 框 宽度 为 8 
个 像素 ， 边 框 颜 色 为 浅 绿色 ， 边 框 暗 边线 的 颜色 
为 黑色 。 其 代码 运行 后 的 显示 效果 ， 如 图 7-10 所 
示 。 

从 图 7-10 可 以 看 出 , <table> 元 素 使 用 边框 暗 
边线 颜色 属性 后 ， 表 格 的 右 侧 和 底部 的 边线 的 颜 
色 发 生 了 变化 。 


7.2.7 ”边框 亮 边 线 属性 bordercolorlight 


<table> 元 素 中 边框 亮 边线 是 指 表格 的 左 侧 
和 项 部 的 边线 。 用 边框 亮 边线 属性 bordercolorlight 
来 定义 表格 边框 亮 边线 的 颜色 。 其 语法 结构 如 下 
所 示 。 


EET TT 
QD 收 基 UW) 工 其 0] 帮助 0 


六 件 @J)。 六 EF】 查看 


(Om: © IW Du jim 


MEW [Es ny Pormerts 7 Wnt ecto Mn 了 可 图 交 到 馆 访 ” 
加 
自然 开学 人文 科学 
网 理化 学 等 知识 | 社会 哲学 等 知识 
和 加 
BEd [ [| EF LA 4 


7-10 定义 了 边框 暗 边线 颜色 属性 后 的 效果 


<table border=" 数 字 值 " bordercolorlight=" 颜色 值 ">……</table> 


当 使 用 bordercolorlight 属性 时 ， 要 定义 相应 的 border 属性 ， 否 则 bordercolorlight 属性 将 没 
有 表现 效果 。 下 面 是 一 个 在 <table> 元 素 中 使 用 bordercolorlight 属性 的 实例 。 其 代码 如 下 所 示 。 


Wl table-bordercolorlight.html 


01 <body> 


02 <table border="8" width="400" height="400" bordercolor="#999999" bordercolorlight="#00FF99"> 


<t> 
<td> 初 唐 四 杰 </td><td> 苏 门 四 学 士 <td> 
</> 


<t> 
<td> 王 勃 、 杨 炯 、 卢 照 邻 、 骆 宾 王 。</td><td> 黄 庭 坚 、 秦 观 、 晃 补 之 和 张 未 的 并 称 </td> 


</t> 
03 </table> 


04 </body> 


在 上 面 的 实例 中 ，02 行 中 定义 了 <table> 元 素 的 宽度 为 400 像素 ， 高 度 为 400 像素 ， 边 框 
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宽度 为 5 个 像素 ， 边 框 颜色 为 浅 灰 色 ， 边 框 亮 边线 
的 颜色 为 浅 绿色 。 其 代码 运行 后 的 显示 效果 ， 如 图 
7-11 所 示 。 

从 图 7-11 可 以 看 出 , <table> 元 素 使 用 边框 亮 边 
线 颜色 属性 后 ， 表 格 的 左 侧 和 项 部 的 边线 颜色 发 生 
了 变化 。 


7.2.8 背景 颜色 属性 bgcolor 


为 了 突出 显示 表格 ， 还 可 以 为 表格 设置 与 页 面 
不 同 的 背景 。 通 常用 背景 颜色 属性 bgcolor 来 定义 表 
格 的 背景 颜色 。 其 语法 结构 如 下 所 示 。 


<table bgcolor= "颜色 值 "> 其 他 表格 </table> 
其 中 颜色 值 既 可 以 使 用 颜色 名 称 ， 也 可 以 使 用 


EEEEEEEETEE 


Om -© aD Pm 次 wm al 


Er et TI 


和 杨 烟 ， 卢 照 久 、” 黄 府 坚 、 友 现 ， 黑 补 之 和 三 
宾 王 。 末 的 并 称 


TTT Sr 


7-11 定义 了 边框 亮 边线 颜色 属性 后 的 效果 


16 进 制 的 颜色 值 。 下 面 是 一 个 在 <table> 元 素 中 使 用 bgcolor 属性 的 实例 。 其 代码 如 下 所 示 。 


table-bgcolor html 


01 <body> 


02 <table bgcolor="#FFFFO0" border=4 bordercolor="#990000"> 


03 ”<caption> 通 讯 录 </caption> 
<t> 


<td>15088946572</td> 
A> 
<t> 
<td> 李 四 </td> 
<td> 陕 西西 安 </td> 
<td>0000-32145687</td> 
<td>13965478635</td> 


<t> 
<td> 王 五 <td> 
<td> 天 津 市 南海 路 </td> 
<td>000-123654789</td> 
<td>13545700506</td> 
A> 

04 </table> 

05 </body> 
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本 例 程 中 02 行 设 置 <table> 元 素 的 宽度 和 高 


度 默认 ， 背 景 颜色 为 浅 栖 色 。 其 代码 运行 后 的 显 。 避 
i ar 
从 图 7-12 可 以 看 出 , <table> 元 素 的 背景 不 但 es E 


显示 在 表格 之 中 ， 同 时 也 会 显示 在 默认 的 部 分 边 
框 之 中 。 


7.2.9 背景 图 片 属性 background 


为 了 让 表格 更 加 绚丽 ， 除 了 可 以 为 表格 设置 
背景 色 之 外 ， 还 可 以 设置 一 个 背景 图 像 。 通 常用 
背景 图 片 属性 background 来 定义 表格 使 用 的 背景 ”四 这 | 
图 片 。 如 果 单 元 格 中 没有 定义 自身 的 背景 颜色 属 ”图 7-12 定义 了 表格 背 虹 上 色 属性 后 的 表现 效果 
性 或 者 图 片 属性 ， 则 单元 格 将 显示 <table> 元 素 中 定义 的 背景 图 片 。 其 语法 结构 如 下 所 示 。 


<table background=" 图 片 路 径 ">……</table> 


其 中 图 片 路 径 既 可 以 使 用 相对 路 径 ， 也 可 以 使 用 绝对 路 径 。 下 面 是 一 个 在 <table> 元 素 中 使 
用 background 属性 的 实例 。 其 代码 如 下 所 示 。 


到 


Wb table-background.html 


02 <table border="1" width="300" height="300" background="http://www.w3.org/Icons/w3c_main"> 


<t> 
<td> 表 格 内 容 1</td><td> 表 格 内 容 1</td> 
</tr> 


-4 表格 内 容 2 增加 内 容 </td><td> 表 格 内 容 2 增加 内 容 </td> 

03 Ss 

04 </body> 

在 该 实例 中 ,02 行 中 害 义 了 able> 元 的 宙 [ss 
度 为 300 像素 ， 高 度 为 300 像素 ,背景 图 片 为 [SEED A 人 weim G 
W3C 网 站 的 logo。 其 代码 运行 后 的 显示 效果 ， 如 
图 7-13 所 示 。 

从 图 7-13 可 以 看 出 ,<table> 元 素 使 用 的 背景 
图 片 将 按照 从 左 至 右 、 从 上 到 下 的 顺序 重复 排 满 
整个 表格 。 


7.2.10 ”单元 格 间距 属性 cellspacing 
设计 网 页 时 ， 有 时 候 需 要 把 各 个 单元 格 独 


Ed Ll EE 


图 7-13 定义 了 表格 背景 图 片 属性 后 的 表现 效果 
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跟 我 学 HTML+CSS 


立 。 


在 HTML 中 ， 通 常用 单元 格 间距 属性 cellspacing 来 定义 各 个 单元 格 之 间 的 间距 。 使 用 


cellspacing 属性 定义 单元 格 之 间 间 距 的 同时 ， 也 使 单元 格 和 <table> 元 素 之 间 分 隔 了 一 定 距离 。 
其 语法 结构 如 下 所 示 。 


<table border=" 数 字 值 " cellspacing-" 数 字 值 ">…… ‘</table> 


其 中 数字 值 实际 的 单位 是 像素 。 下 面 是 一 个 使 用 cellspacing 属性 的 实例 。 其 代码 如 下 所 示 。 


LE table-cellspacing.html 


01 <body> 
02 <table width=560 border=4 bordercolor="#000000" cellspacing=15> 
03 ”<caption> 课 程 表 </caption> 
<t> 
<th> 星 期 一 </th> 
< 了 h> 星 期 二 </th> 
< 了 b> 星期 三 </th> 
<th> 星 期 四 </th> 
<th> 星 期 五 </ 了 h> 
</t> 
<t> 
<td> 语 文 </td> 
<td> 数 学 </td> 
<td> 英 语 </td> 
<td> 数 学 </td> 
<td> 语 文 <td> 
</t> 
<t> 
<td> 数 学 </td> 
<td> 英 语 </td> 
<td> 语 文 </td> 
<td> 英 语 </td> 
<td> 英 语 </td> 
</t> 
<tr> 
<td> 历 史 </td> 
<td> 地 理 </td> 
<td> 政 治 </td> 
<td> 历 史 </td> 
<td> 物 理 </td> 
</t> 
04 </table> 
05 </body> 


在 该 实例 中 ，02 行 中 定义 了 <table> 元 素 的 宽度 为 560 像素 ， 边 框 宽度 为 4 个 像素 ， 单 元 


格 间距 为 1 5。 其 代码 运行 后 ， 可 以 看 到 各 个 单元 格 是 独立 的 ， 并 且 和 表格 之 间 有 一 定 的 距离 。 
显示 效果 如 图 7-14 所 示 。 
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7-14 定义 了 单元 格 间距 属性 后 的 效果 


7.2.11 单元 格 补 白 属性 cellspadding 


在 默认 情况 下 ， 表 格 内 的 文字 会 紧 贴 着 表格 的 边框 ， 这 样 看 上 去 非常 拥挤 。 可 以 使 用 单元 
格 补 白 属性 cellspadding 来 调整 各 个 单元 格 与 其 中 的 内 容 之 间 的 间距 。 语 法 结构 如 下 所 示 。 


其 中 数字 值 实际 的 单位 是 像素 。 下 面 是 一 个 使 用 cellspadding 属性 的 实例 。 其 代码 如 下 所 示 。 


Wk table-cellspadding.html 


01 <body> 
02 <table border=4 bordercolor="#FFOOFF" cellspacing=6 cellpadding=20> 
03 ”<caption> 课 程 表 </caption> 

<t> 


<th> 星 期 一 </th> 
<th> 星 期 二 </th> 
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跟 我 学 HTML+CSS 


<td> 历 史 </td> 
<td> 地 理 </td> 
<td> 政 治 </td> 
<td> 历 史 </td> 
<td> 物 理 </td> 
</tr> 
04 </table> 
05 </body> 


在 该 实例 中 ，02 行 中 定义 了 <table> 元 素 边 
框 宽度 为 2 个 像素 ， 单 元 格 补 白 属性 值 为 20。 
其 代码 运行 后 的 显示 效果 ， 如 图 7-15 所 示 。 

从 图 7-15 可 以 看 出 ， 定 义 单元 格 补 白 属性 
后 ， 相 应 的 单元 格 的 内 容 和 单元 格 之 间 的 距离 
发 生 了 变化 。 


7.2.12 表格 单元 格 边框 属性 rules 
有 时候 需要 根据 页 面 的 实际 需要 定义 单元 。 三 


EE FE 
格 之 间 的 边框 ， 在 HTML 中 通常 用 表格 单元 格 图 7-15 定义 了 单元 格 补 白 属性 后 的 效果 
边框 属性 rules 来 在 表格 中 定义 单元 格 之 间 的 边 
框 ， 也 可 以 定义 列 、 行 或 者 列 组 等 元 素 的 边框 。 语 法 结构 如 下 所 示 。 


<table mls=" 属 性 值 ">…… ‘</table> 


其 中 rules 属性 值 的 各 个 具体 含义 如 表 7-3 所 示 。 


表 7-3_align 属性 的 取 值 及 含义 


使 用 所 有 边框 
右 行 或 列 组 中 使 用 边框 
在 行 之 间 使 用 边框 
在 列 之 间 使 用 边框 


7.2.13 ”表格 边框 属性 frame 


表格 边框 属性 frame 用 来 定义 表格 边框 的 显示 方式 ， 通 过 frame 属性 可 以 定义 表格 的 4 个 
边框 是 否 显示 ， 或 者 定义 某 一 侧 的 边框 显示 与 否 。 语 法 结构 如 下 所 示 。 
<table frame=" 属 性 值 "> 其 他 内 容 </table> 


其 中 frame 属性 值 的 具体 含义 如 表 7-4 所 示 。 
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表格 元 素 


表 7-4_frame 属性 的 取 值 及 含义 


属 性 值 代表 的 含义 

box 使 用 所 有 边框 (默认 值 ) 

void 删除 所 有 边框 

above 显示 上 边框 

blow 显示 下 边框 

lhs 显示 左边 框 

ths 显示 右边 框 

nsides 显示 项 部 和 底部 的 边框 

Vsides 显示 左 侧 和 右 侧 的 边框 


下 面 是 一 个 使 用 frame 属性 的 实例 。 其 代码 如 下 所 示 。 
table-frame html 


01 <body> 
02 <table border="4" width="400" height="200" frame= "hs"> 
03 ”<caption> 课 程 表 </caption> 
<t> 
<th> 星 期 一 </th> 
<th> 星 期 二 </th> 
<th> 星 期 三 </h> 
<th> 星 期 四 </th> 
< 了 h> 星 期 五 </th> 
</t> 
<tr> 
<td> 语 文 </td> 
<td> 数 学 </td> 
<td> 英 语 </td> 
<td> 数 学 </td> 
<td> 语 文 </td> 
</t> 
<t> 
<td> 数 学 </td> 
<td> 英 语 </td> 
<td> 语 文 <td> 
<td> 英 语 </td> 
<td> 英 语 <td> 
</t> 
04 </table> 
05 </body> 


在 该 实例 中 ，02 行 中 使 用 了 frame 属性 的 lhs， 定 义 在 表格 中 只 显示 其 左边 框 。 其 代码 运 
行 后 的 显示 效果 ， 如 图 7-16 所 示 。 
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1 着 [i Svenme 4 
图 7-16 定义 了 表格 frame 属性 后 的 效果 


Z.3 | <tr> 元 素 的 属性 


前 面 学 习 了 <table> 元 素 的 属性 ， 接 下 来 ， 将 学 习 <tr> 元 素 的 相关 属性 。 


7.3.1 水平 对 齐 属性 align 


在 HTML 中 通常 用 水 平 对 齐 属 性 align 来 定义 行 所 包含 的 单元 格 内 容 的 水 平 对 齐 方式 。 语 
法 结构 如 下 所 示 。 
<table> 
<tr align=" 属 性 值 "> 其 他 内 容 </t> 
</table> 
align 属性 的 常见 齐 方式 包含 3 种 ， 分 别 为 eft、center 和 right。 下 面 是 一 个 在 <tr> 元 素 中 
使 用 align 属性 的 实例 。 其 代码 如 下 所 示 。 


tralign .html 
01 <body> 
02 <table border=4 bordercolor="#0000FF"> 
03 ”<caption> 我 国 著名 科学 家 一 一 沈 括 </caption> 
04 <tralign="center"> 


05 
06 <tr align—"right"> 
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表格 元 素 


<td> 简 介 </td> 

<td> 沈 括 是 我 国 北 宋 著 名 的 科学 家 ， 他 的 梦 溪 笔 谈 是 我 国 最 早 的 科学 著作 之 一 </td> 
08 </t> 
09 </table> 


10 </body> 
Et Int 自卫 和 


在 该 实例 中 ，02 行 中 定义 了 <table> 元 素 Ee ol 
文件 四 ”六 各 四 收藏 和 ) 工具 姑 助 四 下 3 
的 边框 宽度 为 4 个 像素 ， 边 框 颜色 为 蓝 色 。 。 汪 于 间 生 辣 光洁 二 二 


04 行 中 定义 了 对 齐 属性 值 为 ES 行 定 地 址 四) 尼 ]n wy ee htnl elSED CE 

义 了 对 齐 属性 值 为 右 对 齐 ，07 行 定义 了 对 齐 “| 上 ies 

属性 什 为 左 对 齐 ,通过 定义 <u> 元 素 中 的 align “| | 所 ey a 
相 溪 笔谈 | 


属性 ， 实 现 了 某 一 行内 容 的 居中 。 其 代码 运 
行 后 的 显示 效果 ， 如 图 7-17 所 示 。 


Es 


| 沈 括 是 我 国 北宋 著名 的 科学 家 ， 人 地 的 梦 溪 笔谈 是 我 国 最 早 的 
科学 著作 之 一 


7.3.2 ”垂直 对 齐 属性 valign 


在 制作 表格 的 时 候 ， 也 可 以 把 单独 的 一 
行 设 置 成 特殊 对 齐 方式 。 在 HIML 中 通常 用 
垂直 对 齐 属性 valign 来 定义 行 所 包含 的 单元 格 内 容 的 垂直 对 齐 方式 。 语 法 结构 如 下 所 示 。 

<table> 

<tr valign=" 属 性 值 '> 其 他 部 分 </t> 

</table> 

valign 属性 的 取 值 包含 3 种 ， 分 别 为 ttp、middle 和 bottom。 下 面 是 一 个 在 <tr> 元 素 中 使 用 
valign 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb tr-valign.html 
01 <body> 
02 <table border=4 bordercolor="#660000" cellpadding=10> 
03 ”<caption> 我 国 著名 科学 家 一 沈 括 <jcaption> 
04 <trheight=20 valign="top"> 
<td> 朝 代 </td> 


| 


7-17 ”在 <tr> 元 素 中 定义 align 属性 后 的 表现 效果 


06 <trheight=50 valign="center"> 
<td> 著 作 </td> 
<td> 梦 溪 笔 谈 </td> 
07 </t> 
08 <trheight=90 valign="bottom"> 
<td> 简 介 </td> 
<td> 沈 括 是 我 国 北宋 著名 的 科学 家 ， 他 的 梦 溪 笔 谈 是 我 国 最 早 的 科学 著作 之 一 </td> 
09 </t> 
10 </table> 
11 </body> 


在 该 实例 中 ，02 行 中 定义 了 <table> 元 素 的 边框 宽度 为 2 个 像素 。04 行 中 定义 了 垂直 对 齐 
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跟 我 学 HTML+CSS 


属性 值 为 top, 文字 会 在 表格 上 方 显示 。 同 


样 的 06 行 中 定义 了 对 齐 属性 值 为 center， | 到 a 四 者 = 
OO | Wm | 


当 设 置 行 的 委 直 对 齐 方式 - Wicrosoft Internet 本 


工具 中 和 名 下 3 


文字 会 在 表格 的 中 部 显示 , 最 后 在 08 行 中 。 | 是 站 EU Om we” 
定义 了 对 齐 属性 值 为 bottom， 文 字 会 出 现 ee - 
在 表格 底部 。 其 代码 运行 后 的 显示 效果 ， pr 
如 图 7-18 所 示 。 不 

从 图 7-18 可 以 看 出 ， 通 过 定义 <tr> 元 疤 | 车 


素 中 的 valign 属性 ， 实 现 了 某 一 行内 容 的 
顶部 对 齐 。 


简 | 沈 括 是 我 国 北宋 著名 的 科学 家 ， 他 的 梦 溪 笔 谈 是 我 国 最 早 
介 “| 的 科学 著作 之 一 


7.3.3 ”背景 颜色 属性 bgcolor 上 
E23 夯 夯 夯 阿 奇 厅 大 5 天 大 

在 HIML 中 通常 用 背景 颜色 属性 。 图 7.18 在 <tc> 元 素 中 定义 valien 属性 后 的 表现 效果 
bgcolor 来 定义 行 的 背景 颜色 。 语法 结构 如 
下 所 示 。 

<table> 

< bgeolor=" 颜 色 值 >……<Jtr> 
</table> 


其 中 颜色 值 既 可 以 使 用 颜色 名 称 , 也 可 以 使 用 16 进 制 的 颜色 值 。 下 面 是 一 个 在 <t> 元 素 中 
使 用 bgcolor 属性 的 实例 。 其 代码 如 下 所 示 。 


Wk tr-bgcolor.html 
01 <body> 


02 <table width=500 border=]> 
03 ”<caption> 甲 班 部 分 学 员 的 成 绩 表 </caption> 
04 <trbgcolor="#00FF00"> 
<th> 姓 名 </th> 
<th> 数 学 </th> 
<th> 语 文 </th> 
<th> 外 语 </th></t> 
<t> 
<td> 张 三 </td> 
<td>88</td> 
<td>87</td> 
<td>91</td></tr> 
05 <trbgcolor="#EFEE00"> 
<td> 李 四 </td> 
<td>87</td> 
<td>80</td> 
<td>85</td></tr> 


<td> 王 五 </td> 
<td>80</td> 
<td>78</td> 
<td>95</td></tr> 
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06 </table> 

07 </body> 

在 该 实例 中 , 02 行 定义 了 <table> 元 素 的 Er 本 

ET 二 EE RD E 

宽度 为 500 像素 ， 边 框 宽度 为 1 个 像素 。04 Oa © OO| Pum Termn Ta 
行 中 定义 了 背景 颜色 属性 值 为 绿色 , 05 行 中 a 
定义 了 背景 颜色 属性 值 为 查 色 。 其 代码 运行 
后 的 显示 效果 ， 如 图 7-19 所 示 。 


7.3.4 边框 颜色 属性 bordercolor 


在 HIML 中 通常 用 边框 颜色 属性 
bordercolor 来 定义 行内 单元 格 的 边框 颜色 。 
语法 结构 如 下 所 示 。 

<table> 

<tr bordercolor =" 颜 色 值 '> 其 他 内 容 </tr> 
</table> 

其 中 颜色 值 既 可 以 使 用 颜色 名 称 , 也 可 以 使 用 16 进 制 的 颜色 值 。 下 面 是 一 个 在 <t> 元 素 中 
使 用 bordercolor 属性 的 实例 。 其 代码 如 下 所 示 。 


Wa kd tr-bordercolor.html 
01 <body> 
02 <table width="400" height="160" border="6" bordercolor="00CCFF"> 
03 ”<caption> 甲 班 部 分 学 员 的 成 绩 表 </caption> 


[ 
图 7-19 在 <tr> 元 素 中 定义 bgcolor 属性 后 的 表现 效果 


05 </table> 
06 <body> 


在 该 实例 中 ，02 行 中 定义 了 <table> 元 素 的 宽度 为 400 像素 ， 高 度 为 160 像素 ， 边 框 宽度 
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为 6 个 像素 ， 边 框 颜色 为 蓝 色 。04 行 中 定义 了 表格 
第 二 行 中 内 边框 颜色 属性 值 为 绿色 。 其 代码 运行 后 的 
显示 效果 ， 如 图 7-20 所 示 。 

从 图 7-20 可 以 看 出 , <tr> 元 素 中 使 用 bordercolor 
属性 ， 不 能 改变 <table> 元 素 的 边框 属性 。 


7.3.5 ”边框 暗 边 线 属性 bordercolordark 


在 HIML 中 通常 用 边框 暗 边线 属 性 
bordercolordark 来 定义 行内 单元 格 的 边框 暗 边线 颜 
色 。<tr> 元 素 中 的 边框 暗 边线 指 的 是 行内 单元 格 的 左 
侧 边 线 和 顶部 边线 。 语 法 结构 如 下 所 示 。 

<table> 


<tr bordercolordark "颜色 值 ">……</t>> 
</table> 


ernet fxple -= 上 
fe 人 Er 是 洒 ET Er | 寺 


EE -© .EW Dm Wr @| DO- " 


Er rr SE IT 
加 
甲 斑 邹 分 学 员 的 成 绩 表 


姓名 | 数学 语文 外 语 
区 = 38 87 Bl 


a7 Bo 5 


四 
五 8 pe 55 


IE lL 3 
7-20 ”在 <tr> 元 素 中 定义 bgcolor 
属性 后 的 表现 效果 


其 中 颜色 值 既 可 以 使 用 颜色 名 称 ， 也 可 以 使 用 16 进 制 的 颜色 值 。 
下 面 是 一 个 在 <t> 元 素 中 使 用 bordercolordark 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb tr-bordercolordark.html 


01 <body> 
02 <table border="4" width="500" height="160"> 


03 ”<tr bordercolordark"#FF0000"><td> 自 然 科学 </td><td> 社 会 科学 </td></tr> 
04 ”<tr><td> 自 然 科 学 是 人 类 征服 自然 的 过 程 中 产生 的 </td><td> 社 会 科学 是 人 与 人 相互 交流 产生 的 </td> 


05 ”<tr><td> 自 然 科学 有 物理 ， 化 学 ， 生 物 ， 地 理 等 。</td><td> 社 会 科学 有 政治 、 历 史 和 哲学 。</td></t> 


06 </table> 
07 </body> 


在 该 实例 中 ，02 行 中 定义 了 第 一 个 <table> 
元 素 的 边框 宽度 为 2 个 像素 ， 宽 度 为 500 像素 ， 


高 度 为 160 像素 , 并 在 03 行 中 定义 了 表格 第 一 行 


De mm BI 过 加 


中 边框 暗 边线 属性 值 为 红色 。 其 代码 运行 后 的 显 
示 效 果 如 图 7-21 所 示 。 


7.3.6 ”边框 亮 边线 属性 bordercolorlight 
同样 的 也 可 以 用 边框 暗 边线 属性 


EE 
E| 


学 
华 


周二 meter 


bordercolorlight 来 定义 行内 单元 格 的 边框 亮 边 线 
颜色 。<tr> 元 素 中 的 边框 暗 边线 指 的 是 行内 单元 
格 的 右 侧 边线 和 底部 边线 。 语 法 结构 如 下 所 示 。 


<table> 
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图 7-21 在 <t> 元 素 中 定义 bordercolordark 
属性 后 的 表现 效果 


表格 元 素 


<tr bordercolorlight =" 颜 色 值 "> 其 他 表格 元 素 和 内 容 部 分 </t> 
</table> 


其 中 颜色 值 既 可 以 使 用 颜色 名 称 ， 也 可 以 使 用 16 进 制 的 颜色 值 。 
下 面 是 一 个 在 <tr> 元 素 中 使 用 bordercolorlight 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb tr-bordercolorlight.html 

01 <body> 

02 <table border="4" width="500" height="160"> 

03 ”<tr bordercolorlight="#0000FF"><td> 自 然 科学 </td><td> 社 会 科学 </td></t>> 

04 ”<tr><td> 自 然 科 学 是 人 类 征服 自然 的 过 程 中 产生 的 </td><td> 社 会 科学 是 人 与 人 相互 交流 产生 的 
<hd></tr> 

05 ”<tr><td> 自 然 科 学 有 物理 ， 化 学 ， 生 物 ， 地 理 等 。</td><td> 社 会 科学 有 政治 、 历 史 和 哲学 。</td></tr> 

06 </table> 

07 <body> 


在 该 实例 中 ，02 行 中 定义 了 第 一 个 <table> 元 素 的 边框 宽度 为 2 个 像素 ， 宽 度 为 500 像素 ， 
高 度 为 160 像素 , 03 行 中 定义 了 表格 第 一 行 中 边框 亮 边线 属性 值 为 蓝 色 。 其 代码 运行 后 的 显示 
效果 如 图 7-22 所 示 。 


ET TE | 村 

OO | | 人 Ds M+ 

HOE [E> wy vere re te EETE 
司 | 


自然 科学 入 会 科学 
自然 科学 是 人 类 征服 自然 的 过 程 中 产 | 社会 科学 是 人 与 人 相互 交流 产 
生 的 性 的 


上 化 学 ， 生物， 地理 让 历史 和 区 


J| 


局 部 [Semper 


图 7-22 在 <tr> 元 素 中 定义 bordercolorlight 属性 后 的 表现 效果 


人 <td> 元 素 的 属性 


本 节 将 学 习 单元 格 的 标记 ， 单 元 格 的 标记 与 行 标记 十 分 相似 ， 学 习 的 时 候 可 以 对 照 7.3 节 
来 加 深 对 单元 格 的 理解 。 


7.4.1 宽度 属性 width 
HTML 中 也 用 宽度 属性 width 来 定义 单元 格 的 宽度 。 语 法 结构 如 下 所 示 。 


<table> 


<t> 
<td width=" 数 字 值 "> 内 容 部 分 </td> 
</> 


143 


跟 我 学 HTML+CSS 


</table> 


其 中 数字 值 的 实际 单位 是 像素 。 下 面 是 一 个 在 <td> 元 素 中 使 用 width 属性 的 实例 。 其 代码 
如 下 所 示 。 


bd td-width.html 


01 <body> 

02 <table border="4" width="400" height="200"> 

03 ”<tr><td width="200"> 自 然 科学 </td><td> 社 会 科学 </td></t>> 

04 ”<tr><td > 自然 科学 关于 人 类 生产 发 展 的 科学 </td><td > 社会 科学 是 人 类 政治 经 济 发 展 的 科学 </td></tr> 

05 </table> 

06 </body> 

在 这 个 实例 中 ，02 行 定义 了 <table> 元 素 的 边框 宽度 为 4 个 像素 ， 宽 度 为 400 像素 ， 高 度 
为 220 像素 。 第 一 行 左 侧 单元 格 中 定义 宽度 为 200 像素 。 其 代码 运行 后 的 显示 效果 ， 如 图 7-23 
所 示 。 可 以 看 出 <td> 中 定义 宽度 后 ， 虽 然 没 有 定义 第 二 个 表格 的 宽度 ， 但 是 页 面 会 自动 调整 宽 
度 使 总 宽度 等 于 <table> 元 素 的 宽度 。 如果 把 第 二 单元 格 的 宽度 设置 为 300 像素 , 其 代码 如 下 所 示 。 


Wb td-widthtwo.html 


01 <body> 

02 <table border="4" width="400" height="200"> 

03 ”<tr><td width="200"> 自 然 科 学 </td><td width="300'> 社 会 科学 </td></t>> 

04 ”<tr><td> 自 然 科学 关于 人 类 生产 发 展 的 科学 </td><td> 社 会 科学 是 人 类 政治 经 济 发 展 的 科学 </td></t> 
05 </table><br 亡 

06 <table border="4" width="400" height="200"> 

07 ”<tr><td> 自 然 科 学 </td><td> 社 会 科学 </td></t> 

08 ”<tr><td> 自 然 科学 关于 人 类 生产 发 展 的 科学 </td><td> 自 然 科学 关于 人 类 生产 发 展 的 科学 </td></t> 
09 </table> 

10 </body> 


其 代码 运行 后 的 显示 效果 ， 如 图 7-24 所 示 。 
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图 7-23 在 <td> 元 素 中 定义 width 属性 后 的 表现 效果 图 7-24 单元 格 宽度 之 和 大 于 表格 宽度 的 显示 效果 
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从 图 7-23 和 图 7-24 可 以 看 出 ， 当 单元 格 的 宽度 之 和 大 于 <table> 元 素 的 宽度 时 ， 表 格 的 显 
示 宽 度 为 <table> 元 素 中 定义 的 宽度 。 单 元 格 按照 各 自 的 宽度 比例 自动 调整 宽度 。 


7.4.2 ”高 度 属性 height 
HTML 中 用 高 度 属性 height 来 定义 单元 格 的 高 度 。 语 法 结构 如 下 所 示 。 


<table> 


<t> 


<td height=" 数 字 值 "> 内 容 部 分 </td> 


/> 


</table> 


其 中 数字 值 的 实际 单位 是 像素 。 高 度 属性 与 宽度 属性 基本 一 样 ， 下 面 是 一 个 在 <td> 元 素 中 
综合 使 用 width 和 height 属性 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 7-24| td-height.html 

<body> 
<table border=4 bordercolor="#660000" cellspacing=4 cellpadding=9> 
<caption> 某 班级 的 部 分 成 绩 </caption> 

<tr bgcolor="#FFFF00"> 


05 


</t> 


</tr> 


06 </table> 
07 </body> 


<td width=100 height=30> 姓 名 </td> 
<td width=130> 语 文 </td> 
<td> 数 学 </td> 

<td> 英 语 </td> 

<td width=130> 科 学 </td> 


<td height=40> 张 飞 </td> 
<td>78</td> 

<td width=130>80</td> 
<td width=70>95</td> 
<td>88</td> 


<td> 李 明 </td> 

<td>80</td> 

<td>85</td> 

<td>91</td> 

<td height=70 width=120>80</td> 


<td> 王 丽 </td> 

<td height=35>87</td> 
<td>76</td> 
<td>91</td> 
<td>89</td> 
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在 该 实例 中 ， 人 正 sh 如 图 7-25 所 示 。 


TREE 
Be dE 各 


图 7-25 在 <td> 元 素 中 同时 定义 width 和 height 属性 后 的 表现 效果 


7.4.3 ”背景 颜色 属性 bgcolor 


为 了 增加 表格 的 绚丽 ， 可 以 为 不 同 的 单元 格 分 别 设置 不 同 的 背景 颜色 。 在 HIML 中 也 可 


以 用 背景 颜色 属性 bgcolor 来 定义 单元 格 的 背景 颜色 。 语 法 结构 如 下 所 示 。 


<table> 


<t> 
<td bgeolor=" 颜 色 值 > 内 容 部 分 <td> 
</t> 
</table> 
其 中 颜色 值 既 可 以 使 用 颜色 名 称 ， 也 可 以 使 用 16 进 制 的 颜色 值 。 
下 面 是 一 个 在 <td> 元 素 中 使 用 bgcolor 属性 的 实例 。 其 代码 如 下 所 示 。 
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<td bgcolor="#71E2FF"> 李 明 </td> 
<td bgcolor="#B382EE">95</td> 
<td bgcolor="#7EF1C0">98</td> 
<td bgcolor="#78DC87">95</td> 
<td bgcolor="#F19B7E">88</td> 
</t> 


<tr> 
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<td bgcolor="#7EF1CF"> 张 丽 </td> 
<td bgcolor="#E49B7E">90</td> 
<td bgcolor="#EF81C6">99</td> 
<td bgcolor="#B6BOE3">91</td> 
<td bgcolor="#B182FF">87</td> 
</tr> 

06 </table> 

07 </body> 


在 该 实例 中 , 04 行 对 表格 的 第 一 行 统一 
设置 了 颜色 , 05 行 中 对 各 个 单元 格 的 颜色 都 
做 了 设置 ， 其 代码 运行 后 的 显示 效果 ， 如 图 
7-26 所 示 。 

从 图 7-26 可 以 看 出 , <td> 中 定义 的 背景 
颜色 会 更 加 靠 前 一 些 ， 而 且 覆 盖 <tr> 元 素 和 
<table> 元 素 中 定义 的 背景 颜色 ， 希 望 大 家 加 


号 让 音 元 由 的 育 县 色 Wicres 


7.4.4 背景 图 片 属性 background 


HIML 中 通常 用 背景 图 片 属 性 图 726 在 <td> 元 素 中 定义 becolor 周作 后 的 条 效果 
background 来 定义 单元 格 使 用 的 背景 图 片 ， 
在 <td> 元 素 中 定义 的 背景 图 片 将 覆盖 <table> 元 素 中 定义 的 背景 颜色 或 者 背景 图 片 ， 也 将 覆盖 
<tr> 元 素 中 定义 的 背景 颜色 。 语 法 如 下 所 示 。 
<table> 
<t> 
<td background=" 图 片 路 径 "> 内 容 部 分 </td> 


</tr> 
</table> 


其 中 图 片 路 径 既 可 以 使 用 相对 路 径 ， 也 可 以 使 用 绝对 路 径 。 下 面 是 一 个 在 <td> 元 素 中 使 用 
background 属性 的 实例 。 其 代码 如 下 所 示 。 


td-background html 
<body> 
2 <table border="4" width="400" height="200" > 
03 ”<tr><td background=" picl.jpg'"> 蜂 鸟 </td><td> 蜂 鸟 是 世界 上 最 小 的 鸟 类 </td></tr> 
04 ”<tr><td> 蜂 乌 在 采集 花蜜 </td><td background=" pic2jpg"></td></tr> 
05 </table> 
06 </body> 


在 该 实例 中 ，02 行 定义 了 <table> 元 素 的 宽度 为 350 像素 ,高度 为 200 像素 ， 边框 宽度 为 2 
个 像素 ， 背 景 颜色 为 很 浅 的 灰色 。03 行 和 04 行 分 别 在 单元 格 的 左 人 出 和 右 侧 定义 了 背景 图 片 。 
其 代码 运行 后 的 显示 效果 ， 如 图 7-27 所 示 。 
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图 7-27 在 <td> 元 素 中 定义 background 属性 后 的 表现 效果 


7.4.5 水 平 对 齐 属性 align 


在 HIML 中 ， 通 常用 水 平 对 齐 属 性 align 来 定义 单元 格 内 容 的 水 平 对 齐 方式 。 语 法 结构 如 
下 所 示 。 
<table> 
<tr> 
<td> 内 容 部 分 </td> 
</t> 


</table> 


align 属性 的 取 值 有 left、right 和 center， 下 面 是 一 个 在 <td> 元 素 中 使 用 align 属性 的 实例 。 
其 代码 如 下 所 示 。 


td-align html 


01 <body> 
02 ”<table border=2 bordercolor="#660000" cellspacing=2 cellpadding=7 height=200 width=550> 
03 ”<caption> 某 班 的 部 分 成 绩 </caption> 
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<td>78</td> 
<td>85</td> 
<td>91</td> 
<td>98</td></tr> 
<tr> 
<td> 王 五 </td> 
<td>86</td> 
<td>75</td> 
<td>91</td> 
<td>99</td></tr> 
05 </table> 
06 </body> 
在 该 实例 中 , 02 行 定义 了 <table> 元 素 的 
高 度 为 200 像素 ， 宽 度 为 550 像素 ， 边 框 宽 
度 为 2 个 像素 。04 行 在 表格 的 第 1 行 第 2 个 
单元 格 中 , 定义 了 水 平 对 齐 属性 值 为 left。 第 
3 个 单元 格 中 ， 定 义 了 水 平 对 齐 属 性 值 为 
right。 第 4 个 单元 格 中 ， 定 义 水 平 对 齐 属性 
为 center。 最 后 一 个 单元 格 为 默认 ， 其 代码 
运行 后 的 显示 效果 ， 如 图 7-28 所 示 。 
从 图 7-28 可 以 看 出 , 通过 定义 <td> 元 素 
中 的 align 属性 , 可 以 更 改 单元 格 本 身 内 容 的 
水 平 对 齐 方式 。 图 7-28 在 <td> 元 素 中 定义 align 属性 后 的 表现 效果 
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7.4.6 ”垂直 对 齐 属性 valign 
在 HIML 中 ， 通 常用 垂直 对 齐 属性 valign 来 定义 单元 格 内 容 的 垂直 对 齐 方 式 。 语 法 结构 
如 下 所 示 。 


<table> 


<b> 
<td valign=" 属 性 值 "> 内 容 部 分 </td> 
</t> 
</table> 
valign 属性 的 取 值 有 top、middle 和 bottom 这 3 种 。 下 面 是 一 个 在 <td> 元 素 中 使 用 valign 
属性 的 实例 。 其 代码 如 下 所 示 。 


Wb td-valign html 
01 <body> 


02 <table border=2 bordercolor="#660000" cellspacing=2 cellpadding=7 height=300 width=500> 
03 ”<caption> 某 班 的 部 分 成 绩 </caption> 
04 <trbgcolor="#00FF00"> 
<td> 姓 名 </td> 
<td valign="top"> 语 文 </td> 
<td valign"middle"> 英 语 </td> 
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</tr> 
<tr> 


</tr> 
06 </table> 
07 </body> 
在 该 实例 中 , 02 行 定义 了 一 个 两 行 两 
列 的 <table> 元 素 ， 其 宽度 为 500 像素 ， 高 
度 为 300 像素 ， 边 框 宽度 为 2 个 像素 。04 
和 05 行 之 间 定 义 了 表格 第 1 行 中 第 2 个 单 
元 格 中 的 垂直 对 齐 属性 值 为 top。 第 3 个 单 
元 格 中 垂直 对 齐 属 性 值 为 middle。 第 4 个 
单元 格 中 垂直 对 齐 属性 为 bottom。 其 代码 
运行 后 的 显示 效果 ， 如 图 7-29 所 示 。 
从 图 7-29 可 以 看 出 ， 通 过 定义 <td> 
元 素 中 的 valign 属性 ， 可 以 更 改 单 元 格 本 


身 内 容 的 垂直 对 齐 方式 。 图 7.29 在 tb 元素 中 定义 voliga 属性 后 的 表现 效果 
7.4.7 ”边框 属性 bordercolor 


HTML 中 也 可 以 用 边框 属性 bordercolor 来 定义 单元 格 的 边框 颜色 。 语 法 结构 如 下 所 示 。 


<table> 
<t> 
<td bordercolor=" 颜 色 值 "> 内 容 部 分 </td> 
<> 
</table> 
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表格 元 素 


其 中 颜色 值 既 可 以 使 用 颜色 名 称 ， 也 可 以 使 用 16 进 制 的 颜色 值 。 下 面 是 一 个 在 <td> 元 素 
中 使 用 bordercolor 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb td-bordercolor html 


01 <body> 
02 ”<table border="4" width="500" height="200" cellspacing="8"> 
<tr> 
<td bordercolor="#FF00FF"> 自 然 科 学 </td><td> 社 会 科学 </td> 
</t> 
<t> 
<td> 物 理化 学 </td><td> 政 治 经 济 </td> 
</t> 
03 </table> 
04 </body> 
在 该 实例 中 ，02 行 定义 了 <table> mc 二 到 
元 素 的 边框 宽度 为 4 个 像素 , 宽度 为 500 这 二 a pl so 
像素 ， 高 度 为 200 像素 ， 单 元 格 间 距 为 [CEJTRTITTTTTRTTTTTTZTTTT J 
8。 第 一 行 第 一 个 单元 格 中 定义 边框 颜色 [ie 
为 紫色 色 。 其 代码 运行 后 的 显示 效果 ， [一 加 
如 图 7-30 所 示 。 物理 化 学 政治 经 济 
7.4.8 合并 列 属性 colspan 
合并 列 属性 colspan 用 来 将 某 一 行 es 9 


的 几 个 单元 格 合并 成 一 个 。 语 法 结构 如 图 7.30 在 <td> 元 素 中 定义 bordercolor 属性 后 的 表现 效果 
下 所 示 。 
<table> 
<tr> 
<td colspan-" 数 字 什 "> 内 容 部 分 <td> 
</t> 
</table> 


其 中 数字 值 的 含义 是 合并 的 列 的 数目 。 下 面 是 一 个 在 <td> 元 素 中 使 用 colspan 属性 的 实例 。 
其 代码 如 下 所 示 。 


wb) td-colspan.html 


01 <body> 
02 <table border=] bordercolor="#660000" cellspacing=0 cellpadding=5> 
03 ”<caption> 某 制造 公司 第 一 季度 的 生产 情况 </caption> 
04 <trbgcolor="#CCAAFF"> 

<td width=80></td> 

<td colspan=3 width=400 align="center"> 第 一 季度 </td> 
05 </t> 
06 <trbgcolor="#DDCCFF"> 

<td> 产 品名 称 </td> 
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08 </table> 
09 <body> 


该 示例 定义 了 04 行 中 定义 了 第 1 行 的 第 
2 个 单元 格 将 3 列 合 并 ， 其 代码 运行 后 的 显 
示 效 果 ， 如 图 7-31 所 示 ， 其 中 第 1 行 的 第 2 
个 单元 格 跨 了 3 列 。 


7.4.9 合并 行 属性 rowspan 


单元 格 除了 可 以 在 水 平方 向 下 跨 列 ， 还 
可 在 垂直 方向 上 跨行 。HTML 中 通常 用 合并 
行 属性 rowspan 来 将 某 一 列 的 几 个 单元 格 合 
并 成 一 个 。 注 意 rowspan 设置 的 是 单元 格 在 
垂直 方向 上 跨行 的 个 数 。 也 可 以 说 是 单元 格 
向 下 打通 的 单元 格 个 数 。 语 法 结构 如 下 所 示 。 
<table> 


<t> 
<td rowspan=" 数 字 值 "> 内 容 部 分 </td> 
A> 
</table> 


茶 制 造 公司 第 一 季度 的 生产 情况 


EI ET TT jz | 
om lm | 


En ET | wa 
CE TE ED 


7-31 在 <td> 元 素 中 定义 colspan 属性 后 的 表现 效果 


其 中 数字 值 的 含义 是 合并 的 行 的 数目 。 下 面 是 一 个 在 <td> 元 素 中 使 用 rowspan 属性 的 实例 。 


其 代码 如 下 所 示 。 
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表格 元 素 


LE id-rowspan .html 
01 <body> 
02 <table border=1 bordercolor="#660000" cellspacing=0 cellpadding=5> 
03 ”<caption> 某 图 书馆 的 销售 分 类 </caption> 
04 <trbgcolor="#EFFOOFF"> 
<td width=130> 类 别 </td> 
<td width=290> 子 类 别 </td> 
05 < 
06 ”<tr><tdrowspan=2> 漫 画 区 </td><td> 最 新 漫画 展示 区 </td></t> 
07 ”<tr><td> 漫 画 制作 教程 <td></t> 
08 ”<tr><td rowspan=4> 考 试 专区 </td><td> 小 学 升 初 中 专区 </td></tr> 
09 ”<tr><td> 中 高 考 专区 </td></tr> 
10 <tr><td> 考 研 专区 </td></tr> 
11 <t><td> 公 务 员 专 区 </td></t> 
12 </table> 
13 </body> 


在 该 实例 中 ，02 行 定义 了 一 个 两 行 两 列 的 <table> 元 素 ， 边 框 宽度 为 2 个 像素 。06 行 在 表 
格 第 2 行 第 1 个 单元 格 中 定义 了 rowspan 属性 值 为 2，08 行 在 表格 第 3 行 第 1 个 单元 格 中 定义 
了 rowspan 属性 值 为 4。 其 代码 运行 后 的 显示 效果 ， 如 图 7-32 所 示 。 


加 设置 单元 格 行 跨度 - Wicreseft Internet ERISEEE 


| 文件 四 钢 猎 四 查看 OD。 收藏 和 ) 工具 上 帮助 0D | 性 

Qa- © ID mm 名 2 本 

| 症 D |€E)D: wy Docwments\oT Wntitled-31 htal EISES:, » 
某 图 书馆 的 销售 分 类 


最 新 漫画 展示 区 
湿 画 区 


小 学 升 初中 专区 


三石 厂 三 厂 语 Career 


图 7-32 在 <td> 元 素 中 定义 rowspan 属性 后 的 表现 效果 


从 图 7-32 可 以 看 出 第 2 行 的 第 1 个 单元 格 合并 了 2 行 , 第 3 行 的 第 1 个 单元 格 合并 了 


4 行 。 


7.4.10 


同行 显示 属性 nowrap 


当 表 格 没有 设 定 宽度 的 时 候 ， 整 个 表 的 宽度 会 根据 表格 内 容 进行 调整 ,但 表格 的 宽度 不 会 
超出 浏览 器 的 宽度 。 当 单元 格 内 的 内 容 过 长 的 时 候 会 自动 换行 ， 如 果 不 希 望 表格 的 某 个 单元 格 
的 内 容 换 行 ， 可 以 通过 同行 显示 属性 nowrap 来 使 单元 格 中 的 文本 同行 显示 。 只 有 当 文 本 中 出 
现 换行 元 素 <br>， 或 者 其 他 默认 换行 的 元 素 时 文本 内 容 才能 换行 显示 。 语 法 结构 如 下 所 示 。 
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跟 我 学 HTML+CSS 


<table> 
<t> 
<tdnowrap=" nowrap'"> 内 容 部 分 </td> 
</t> 
</table> 


先 看 下 面 的 这 个 实例 ， 其 代码 如 下 所 示 。 


Wa td-nowrap.himl 


02 <table align="center" border=5 cellspacing=0 bordercolor="#990000" cellpadding=3> 
03 ”<caption> 几 本 书 的 简介 </caption> 
04 ”<tr>< 了 b> 书 名 </th><th> 作 者 </ 了 h><th> 内 容 简 介 </th></tr> 
05 <t> 
<td> 史 记 </td> 
<td> 司 马 迁 </td> 
<td>《 史 记 》 是 中 国 西 汉 时 期 的 历史 学 家 司马 迁 撰写 的 史学 名 著 ， 列 “二 十 四 史 " 之 首 ， 
《史记 》 是 中 国 古代 最 著名 的 古典 典籍 之 一 。 


</td> 
06 </t> 
07 <t> 
<td> 水 浒 </td> 
<td> 施 耐 唐 </td> 
<td> 元 末 明 初 小 说 家 施 耐 唐 根 据 民间 流传 的 宋江 起 义 故事 , 写成 长 篇 小 说 《水 浒 传 》。</td> 
08 </t> 
09 <t> 
<td> 红 楼 梦 </td> 
<td> 曹 雪 芹 </td> 


<td> 书 中 以 贾 、 史 、 王 、 薛 四 大 家 族 为 背景 ， 以 贾 宝 玉 、 林 袋 玉 爱 情 悲剧 为 主线 ， 着 重 描 
写 页 、 宁 二 府 由 盛 到 衰 的 过 程 。</td> 
10 </t> 
11 </table> 


12 </body> 


在 该 实例 中 ， 其 代码 运行 后 的 显示 效果 ， 如 图 7-33 所 示 。 因 为 没有 使 用 nowrap 属性 ， 单 
元 格 中 的 文本 内 容 根据 页 面 大 小 自动 换行 。 
如 果 不 希望 表格 的 某 个 单元 格 的 内 容 换行 ,可 以 通过 nowrap 参数 进行 设置 , 实例 代码 如 下 。 


Wb) table-nowraptwo .html 
01 <body> 
02 ”<table align="center" border=5 cellspacing=0 bordercolor="#990000" cellpadding=3> 
03 ”<caption> 几 本 书 的 简介 </caption> 
<t> 
<th> 书 名 </thb> 
<th> 作 者 </th> 
<th> 内 容 简介 </th> 
</t> 
04 <t> 


<td> 史 记 </td> 
<td> 司 马 迁 </td><td nowrap>《 史 记 》 是 中 国 西汉 时 期 的 历史 学 家 司马 迁 撰写 的 史学 名 著 ， 
列 “ 二 十 四 史 " 之 首 ，《 史 记 》 是 中 国 古代 最 著名 的 古典 典籍 之 一 。</td> 
05 </tr> 
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07 


一 
06 ”<tr><td nowrap > 水 浒 传 </td> 
<td> 施 耐 唐 </td> 
<td> 元 末 明 初 小 说 家 施 耐 庵 根据 民间 流传 的 宋江 起 义 故事 , 写成 长 篇 小 说 《水 浒 传 》。</td> 
07 </tr> 
08 ”<tr><tdnowrap > 红楼 梦 </td> 
<td> 曹 雪 芹 </td> 
<td> 书 中 以 贾 、 史 、 王 、 薛 四 大 家 族 为 背景 ， 以 机 宝玉 、 林 仿 玉 爱情 悲剧 为 主线 ， 着 重 描 
写 页 、 宁 二 府 由 盛 到 衰 的 过 程 。</td> 


在 该 实例 中 ， 代 码 运行 后 的 显示 效果 如 图 7-34 所 示 。 
从 图 7-33 和 图 7-34 可 以 看 出 , 运行 代码 看 到 表格 中 设置 了 nowrap 参数 的 单元 格 内 容 不 换 
行 显示 了 ， 而 超出 浏览 器 宽度 的 内 容 则 通过 浏览 器 的 滚动 条 来 显示 。 


ET 


CED lp 


县 面 同 。w pecwertror eu tz| 固 Wl | 


人 < 史记》 是 中 国 古 汉 对 期 的 历史 学 赤 司 马 迁 操 瑟 的 史学 名 
和 Ne “之 首 ，< 史 记 》 是 中 国 古代 最 著名 的 


元 本 明 初 小 说 宗 施 耐 席 根据 民间 沪 苇 的 宋江 殷 义 故事 ， 写 
加 Er 多 ， 


书 中 以 票 ， 史 、 王 ， 萨 四 大 家 族 为 背景 ， 以 喘 宇 王 、 林 全 
Fen 着 重 描写 页， 也 一 府 由 辟 到 豪 的 过 


图 7-33 在 <td> 元 素 中 没有 定义 nowrap 属性 后 的 表现 效果 图 “图 7-34 ”在 <td> 元 素 中 定义 nowrap , 


Pe 表格 中 使 用 的 其 他 元 素 


表格 中 除了 使 用 <tr> 元 素 和 <td> 元 素 以 外 ， 还 可 以 使 用 其 他 的 元 素 ， 其 中 包括 <caption>、 
<th>、<thead> 等 。 下 面 将 逐一 详细 讲解 。 


7.5.1 表格 标题 元 素 <caption> 


在 制作 表格 时 , 可 以 用 表格 标题 元 素 <caption> 来 定义 表格 的 标题 。<caption> 元 素 中 定义 的 
表格 标题 内 容 ， 将 显示 在 表格 的 顶部 (表格 边框 的 外 部 )。 语 法 结构 如 下 所 示 。 


<table> 
<caption> 表 格 标题 </caption> 
<t> 
<td> 内 容 部 分 </td> 
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跟 我 学 HTML+CSS 


< 
</table> 
<caption> 元 素 必须 添加 在 表格 元 素 <table> 和 行 元 素 <tr> 之 间 ， 或 者 两 个 行 元 素 <tr> 之 间 。 
<caption> 元 素 的 放置 位 置 并 不 影响 其 显示 效果 (将 在 实例 7-36 中 演示 )。 
下 面 是 一 个 在 表格 中 使 用 <caption> 元 素 的 实例 。 其 代码 如 下 所 示 。 


Wb caption.html 


01 <body> 
02 <table border=] bordercolor="#660000" cellspacing=0 cellpadding=5> 
03 ”<caption> 某 图 书馆 的 销售 分 类 </caption> 
04 <trbgcolor="#FFO0FF"> 
<td > 类别 </td> 
<td > 子 类 别 </td> 
</t> 
<t> 
<td > 漫画 区 </td> 
<td> 最 新 漫画 展示 区 </td> 
</t> 
<t> 
<td> 考 试 专区 </td> 
<td> 小 学 升 初中 专区 </td> 
</t> 
05 </table> 
06 </body> 


在 该 实例 中 ,03 行将 <caption> 元 素 放置 在 表格 元 素 <table> 和 行 元 素 <tr> 之 间 。 其 代码 运行 
后 的 显示 效果 ， 如 图 7-35 所 示 。 


怠 表格 标题 - 中 


oft Internet Explorer 


文件 四 CT Er 收 戌 ) 工具 I) 必 助 ”| | 
7.5.2 表格 头 部 元 素 <th> Bm -© OO am Hom | 
| 寺 址 名 [ 谍 ]n wy nocwmentsvorvuntiuet-34 可 国 和 到 | 刍 接 ”| 

表格 头 部 元 素 <th> 用 来 定义 表格 的 表 头 。 二 机遇 | 


<th> 元 素 和 <td> 元 素 类 似 ， 只 是 使 用 <th> 元 素 
的 文本 内 容 会 加 粗 显 示 , 同时 默认 为 中 间 对 齐 。 
法 结构 如 下 所 示 。 


<table> 
<t> 
<th> 内 容 部 分 </ 了 h> 
</t> 
</table> 


BE Ti onpeter 


图 7-35 在 表格 中 使 用 <caption> 元 素 的 表现 效果 
下 面 是 一 个 在 表格 中 使 用 <th> 元 素 的 实例 。 其 代码 如 下 所 示 。 


例 程 7-35 th html 
01 <body> 
02 ”<table border="4" width="400" height="200"> 
03 ”<tr><th> 自 然 科学 </th><th> 社 会 科学 </th></tr> 
04 <caption>th 和 td</caption> 
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05 ”<tr><td> 自 然 科学 </td><td> 社 会 科学 </td></tr> 
06 </table> 
07 </body> 


其 代码 运行 后 的 显示 效果 ， 如 图 7-36 所 示 。 

汪 表 格 头 部 元 素 - icresoft Interaee Err 
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7-36 在 表格 中 使 用 <th> 元 素 的 表现 效果 


<th> 元 素 中 可 以 使 用 的 所 有 属性 如 表 7-5 所 示 。 
表 7-5 <th> 元 素 的 所 有 属性 


表格 元 素 


属性 名 称 写 法 
文本 显示 方向 属性 dir 
指定 语言 属性 lang 
类 属性 class 
定义 级 联 样式 属性 style 
对 齐 属性 alig 
标题 属性 title 
取消 自动 换行 属性 nowrap 
标记 属性 这 
背景 颜色 属性 bgcolor 
背景 图 片 属性 background 
垂直 对 齐 属性 valign 
边框 颜色 属性 bordercolor 
说 边框 属性 bordercolordack 
亮 边 框 属性 bordercoloright 
合并 列 属性 colspan 
合并 行 属性 rowspan 
表 头 名 称 属性 headers 
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7.5.3 ”表格 头 行 元 素 <thead> 


表格 头 行 元 素 <thead> 用 来 定义 表格 最 上 端 表 首 的 样式 。 其 中 可 以 设置 背景 颜色 、 文 字 对 
齐 方式 、 文 字 的 垂直 对 齐 方式 等 。 语 法 结构 如 下 所 示 。 


<table> 
<thead bgcolor=" 颜 色 代码 " align=" 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 
<t> 


<th> 内 容 部 分 </ 了 b> 


在 该 语法 中 bgcolor、align、valign 参数 的 取 值 范围 与 单元 格 中 的 设置 方法 相同 ,align 可 以 
取 1left、center 或 right; valign 可 以 取 top、middle 或 bottom。 注 意 在 <thead> 标 记 内 还 可 以 包含 
<td>、<th> 和 <tr> 标 记 。 而 一 个 表 元 素 中 只 能 有 一 个 <thead> 标 记 。 下 面 是 一 个 在 表格 中 使 用 
<thead> 元 素 的 实例 。 其 代码 如 下 所 示 。 


bl thead.html 


<body> 
02 <table align="center" border=1 bordercolor="#990000" cellpadding=3 width=500 height=180> 
03 ”<caption> 春 节 预 备 购买 物品 </caption> 
04 <thead bgcolor="#00FFFF" align="center" valign="bottom"> 
05 ”<tr><th> 物 品名 </th><th> 类 型 ~,th><th> 用 途 </th><th> 价 格 预算 </th><th> 数 量 </th></tr> 
06 </thead> 
07 ”<tr><td> 金 龙 鱼油 </td><td> 食 品 </td><td> 生 活 必须 品 </td><td>150</td><td>3</td></tr> 
08 ”<tr><td> 礼 花炮 </td><td> 娱 乐 品 </td><td> 增 加 节日 气氛 </td><td>200</td><td>15 个 </td></t> 
09 ”<tr><td> 红 包 </td><td> 礼 品 </td><td> 送 人 </td><td>200</td><td>25</td></t> 
10 </table> 
11 </body> 


04 行 中 定义 了 表格 最 上 端的 颜色 为 蓝 绿色 ， 居 中 。 其 代码 运行 后 的 显示 效果 ， 如 图 7-37 


图 7-37 在 表格 中 使 用 <thead> 元 素 的 表现 效果 
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07 
一 
7.5.4” 表 主体 元 素 <tbody> 


表 主 体 元 素 <tbody> 用 来 将 表格 的 内 容 分 隔 成 各 个 独立 的 部 分 。 可 以 在 每 个 独立 的 部 分 中 
定义 特定 的 表现 效果 。 语 法 结构 如 下 所 示 。 


<table> 
<tbody bgcolor=" 颜 色 代 码 " align=" 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 
<t> 


<th> 内 容 部 分 </th> 
</tr> 


</tbody> 
</table> 


<tbody> 元 素 的 用 法 与 <thead> 类 似 ， 下 面 是 一 个 在 表格 中 使 用 <tbody> 元 素 的 实例 。 其 代码 
如 下 所 示 。 


WA tbody.html 
01 4 


02 ”<table align="center" border=4 bordercolor="#990000" cellpadding=3 width=500 height=180> 
03 ”<caption> 某 学 校 图 书馆 借 书 记录 </caption> 
04 <thead bgcolor="#97B6FF" align="center" valign="bottom"> 
05 ”<tr><th> 书 籍 名 </th><th> 借 书 日 期 <th><th> 借 书 人 姓名 </ 了 b><th> 借 书 人 专业 </ 了 h><th> 数 量 </th></t> 
06 </thead> 
07 <tbody bgcolor="#FFFF00" align="left" valign="bottom"> 
08 ”<tr><td> 网 站 管理 与 设计 </td><td>3 月 24 日 </td><td> 张 三 </td><td> 计 算 机 信息 技术 
Atd><td>1</td></t> 
09 ” <tr><td> 工程 力学 </td><td>3 月 24 日 </td><td> 李 明 </td><td> 力 学 系 </td><td>1</td></tr> 
10 ”<t><td> 理 论 物理 </td><td>3 月 24 日 </td><td> 李 静 </td><td> 物 理 系 </td><td>1</td></tr> 
11 </tbody> 


07 行 和 11 行 中 对 表格 做 了 统一 的 设置 ， 运 行 这 段 代 码 ， 可 以 看 到 表格 的 主体 内 容 统一 设 
置 了 样式 ， 如 图 7-38 所 示 。 


置 表 主 体 的 样式 -_ Wiereseft_ Internet Explorer 
Er 搞 错 到 ) Er 本 RD Er 


Oa -© WPMm Wm IB- a- 


地址 凶 | 色 ] n wy Docwnents\o7\Wnti tled-38. htel 可 园 9 到 WE >” 


某 学 校 图 书馆 借 书 记录 


7-38 在 表格 中 使 用 <tbody> 元 素 的 表现 效果 
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<tbody> 元 素 中 可 以 使 用 的 所 有 属性 如 表 7-6 所 示 。 


表 7-6 <tbody> 元 素 的 所 有 属性 


属性 名 称 三 

文本 显示 方向 属性 dir 

指定 语言 属性 lang 

类 属性 class 

定义 级 联 样式 属性 style 

对 齐 属性 ali 

标题 属性 title 

垂直 对 齐 属性 valign 


7.5.5 ”表格 行 尾 元 素 <tfoot> 
表格 行 尾 元 素 <tfoof> 用 来 定义 表格 行 尾 的 标注 等 内 容 。 语 法 结构 如 下 所 示 。 


<table> 
<tfoot bgcolor=" 颜 色 代码 " align=" 对 齐 方式 " valign=" 垂 直 对 齐 方式 "> 


<t> 
<td> 内 容 部 分 </td> 
</tr> 
</tfoot> 
</table> 
在 该 语法 中 bgcolor、align、valign 参数 的 取 值 范围 与 <thead> 标 记 中 的 设置 方法 相同 。 一 
个 表 元 素 中 只 能 有 一 个 <tfooP> 标 记 。 下 面 是 一 个 在 表格 中 使 用 <tfoof> 元 素 的 实例 。 其 代码 如 下 
所 示 。 


Wb tfoot.html 


01 <body> 

02 <table align="center" border=4 bordercolor="#990000" cellpadding=3 width=450 height=160> 

03 ”<caption> 某 学 校 图 书馆 借 书 记录 </caption> 

04 <thead bgcolor="#97B6FF" align="center" valign="bottom"> 

05 ”<tr><th> 书 籍 名 </th><th> 借 书 日 期 <th><th> 借 书 人 姓名 </th><th> 借 书 人 专业 </th><th> 数 量 </th></t> 

06 </thead> 

07 <tbody bgcolor="#EFFF00" align="left" valign="bottom"> 

08 ”<tr><td> 网 站 管理 与 设计 </td><td>3 月 24 日 <td><td> 张 三 </td><td> 计 算 机 信息 技术 
</td><td>1</td></t> 

09 ”<tr><td> 工 程 力 学 </td><td>3 月 24 日 </td><td> 李 明 </td><td> 力 学 系 </td><td>1</td></t> 

10 ”<tr><td> 理 论 物理 </td><td>3 月 24 日 </td><td> 李 静 </td><td> 物 理 系 </td><td>1</td></t> 

11 </tbody> 

12 <tfoot bgcolor="#FAA9AB" align="right" valign="middle"> 

13 ”<tr><td colspan=5> 表 格 创建 日 期 : XX-XX-XX</td></tr> 

14 </tfoot> 

15 </table> 

16 </body> 
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其 代码 运行 后 的 显示 效果 ， 如 图 7-39 所 示 。 


当 设 于 表 主体 的 拌 式 
文件 中 编辑 外) i 四 到 和 


人 es 加- DE os 


几 
7-39 ”在 表格 中 使 用 <tfoot> 元 素 的 表现 效果 


<tfoot> 元 素 中 可 以 使 用 的 所 有 属性 如 表 7-7 所 示 。 
表 7-7 <tfoot> 元 素 的 所 有 属性 


属性 名 称 2 
文本 显示 方向 属性 dir 
指定 语言 属性 lang 
类 属性 class 
定义 级 联 样式 属性 style 
对 齐 属性 align 
标题 属性 tile 
垂直 对 齐 属性 valign 


7.6 本 章 习题 


一 、 选 择 题 


1. 关于 表格 的 描述 正确 的 一 项 是 (。 )。 
A. 在 单元 格 内 不 能 继续 插入 整个 表格 
B. 可 以 同时 选 定 不 相 邻 的 单元 格 

C. 粘贴 表格 时 ， 不 粘贴 表格 的 内 容 
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D. 在 网 页 中 ， 水 平方 向 可 以 并 排 多 个 独立 的 表格 

2. 如 果 一 个 表格 包括 有 1 行 4 列 ， 表 格 的 总 宽度 为 699 像素 ， 间 距 为 5 像素 ， 填 充 为 0 
像素 ， 边 框 为 3 像素 ， 每 列 的 宽度 相同 ， 那 么 应 将 单元 格 定制 为 ( ”) 像 素 宽 。 

A.126 B.136 C.147 D.167 

3. 要 使 表格 的 边框 不 显示 ， 应 设置 border 的 值 是 (。” )。 

A.l B.0 C.2 D.3 

4. 用 于 设置 表格 背景 颜色 的 属性 的 是 ( )。 

A.background B.bgcolor C.BorderColor D.backgroundColor 

5. 以 下 标记 中 ， 用 于 定义 一 个 单元 格 的 是 ( )。 

A. <td>&nbsp:</td> B. <tr>...</tr> 

C. <table>...</table> D. <caption>...</caption> 

6. 以 下 说 法 中 ， 错 误 的 是 (。 )。 

A. 表格 在 页 面 中 的 对 齐 应 在 TABLE 标记 符 中 使 用 align 属性 

B. 要 控制 表格 内 容 的 水 平 对 齐 ， 应 在 TR、TD、TH 中 使 用 align 属性 

C. 要 控制 表格 内 容 的 垂直 对 齐 ， 应 在 TR、TD、TH 中 使 用 valign 属性 

D. 表格 内 容 的 默认 水 平 对 齐 方式 为 居中 对 齐 

二 、 填 空 题 


1. 表格 的 标签 是 ”_， 单 元 格 的 标签 是 __。 

2. 表格 的 宽度 可 以 用 百分比 和 _ 两 种 单位 来 设置 。 

3. 表格 有 3 个 基本 组 成 部 分 : 行 、 列 和 __。 

4. 表格 中 用 列 组 标记 符 是 

5. 将 表格 的 行 分 组 ， 用 到 的 主要 标记 是 

6. 要 控制 单元 格 内 容 与 表格 框 线 之 间 的 空白 ， 应 在 TABLE 标记 符 中 使 用 属 


7， 要 使 整个 表格 行 采用 某 种 对 齐 方式 ， 应 在 标记 符 中 使 用 aligh 属性 。 
三 、 实 战 练习 


1. 制作 一 个 3 行 4 列 的 表格 。 

2. 制作 一 个 4 行 5 列 的 表格 ， 要 求 使 用 水 平 或 者 竖 直 方向 上 的 合并 。 

3. 制作 一 个 表格 ， 并 为 各 个 单元 格 设置 颜色 ， 并 加 上 制作 日 期 。 

4. 编写 出 实现 如 图 7-40 所 示 页 面 效果 的 关键 html 代码 。 其 中 ，A、B、C、D、E 均 为 默 
认 字 号 和 默认 字体 ， 并 且 加 粗 显示 ， 它 们 都 位 于 各 自 单元 格 的 正中 间 ，A 单元 格 的 高 度 为 200 
像素 ，B 单元 格 的 高 度 为 100 像素 ，C 单元 格 的 宽度 为 100 像素 ， 高 度 为 200 像素 。 
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图 7-40 页 面 效 果 


5. 已 知 页 面 效果 如 图 7-41 所 示 ( 其 中 的 细 线 效果 均 为 1 像素 粗细 ， 颜 色 为 黑色 )， 请 填写 
以 下 html 代码 中 留 下 的 空白 。 


昨夜 雨 玻 风 酚 ， 


浓 睡 不 消 残 酒 。 
问卷 帘 人 ， 
却 道 海 棠 依旧 。 
知 否 ? 知 否 ? 
应 是 绿肥 红 瘦 。 
图 7-41 页 面 效 果 
<TABLE cellspacing=___ cellpadding= ____ align="center"> 
<TR height="100"> 
<TD width="100">&nbsp: 
<TD width="1" S 
<ID width="600"><H1 align="center"><FONT 一 楷体 _gb2312"> 如 梦 令 
</FONT></H1> 
<TR ed 
<TD colspan="3" > 
<TR height="600"> 
<TD width="100">&nbsp: 
<TD width="1" > 


<TD width="600" align="middle" valign="top"><H3><BR><BR> 了 昨夜 雨 琉 风 骤 ，<BR> 浓 
睡 不 消 残 酒 。 <BR> 试 问卷 帘 人 ,<BR> 却 道 海 党 依旧 。<BR> 知 否 ? 知 否 ? <BR> 应 是 绿肥 红 瘦 。 
</H3> 
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</TABLE> 
(1 
CO) 
G) 
(9 
(5) 


平时 在 浏览 网 页 时 ， 当 单 击 某 个 字 或 某 个 图 片 时 ， 就 可 以 打开 另外 一 个 画面 。 这 个 作用 对 
网 页 来 说 相当 重要 ， 否 则 游览 者 只 能 每 打开 一 个 页 面 时 都 要 在 地 址 栏 内 输 一 次 地 址 。 


全、 本章 主要 内 容 有 : 


@ 链接 元 素 各 种 属性 的 使 用 方法 和 表现 效果 。 
@ 理解 两 种 路 径 的 特点 和 用 法 。 
能够 使 用 图 片 进行 链接 。 


跟 我 学 HTML+CSS 


8.1 | 链接 和 路 径 


本 节 主 要 讲解 关于 超级 链接 的 概念 、 路 径 基础 知识 、 相 对 路 径 和 绝对 路 径 等 内 容 。 下 面 分 
别 进行 介绍 。 


8.1.1 超 链接 的 概念 


超 链 接 简单 地 说 就 是 从 一 个 网 页 转 到 另 一 个 网 页 的 途径 。 互 联网 就 是 通过 各 种 超 链接 把 整 
个 网 站 的 信息 有 机 地 结合 到 一 起 。 使 浏览 者 从 一 个 页 面 跳 转 到 另 一 个 页 面 ， 实 现 文档 互联 、 网 
站 互联 。 

超 文本 链接 (hypertextlink) 通 常 简称 为 超 链接 (hyperlink)， 或 者 简称 为 链接 (link)。 链 接 是 
HTML 的 一 个 最 强大 和 最 有 价值 的 功能 。 链 接 是 指 文档 中 的 文本 或 者 图 像 与 男 一 个 文档 、 文 档 
的 一 部 分 或 者 一 幅 图 像 链 接 在 一 起 。 其 基本 语法 如 下 。 

<a hre 全 "文件 名 "> 链接 元 素 </a> 或 <a hre 仁 "URL"> 链 接 元 素 </a> 

在 该 语法 中 ， 链 接 元 素 可 以 是 文字 ， 也 可 以 是 图 片 或 其 他 页 面 元 素 。 其 中 href 是 hypertext 
reference 的 缩写 。 通 过 超级 链接 的 方式 可 以 使 各 个 网 页 之 间 连 接 起 来 ， 使 网 站 中 众多 的 页 面 构 
成 一 个 有 机 整体 ， 使 访问 者 能 够 在 各 个 页 面 之 间 跳 转 。 超 级 链接 可 以 是 一 段 文本 、 一 幅 图 像 或 
其 他 网 页 元 素 ， 当 在 浏览 器 中 用 鼠标 单 击 这 些 对 象 时 ， 浏 览 器 可 以 根据 指示 载 入 一 个 新 的 页 面 
或 者 转 到 页 面 的 其 他 位 置 。 

下 面 是 一 个 使 用 超 链接 的 实例 ， 其 代码 如 下 所 示 。 


example.html 

01 <body> 

02 点击 <a hre 全 "http:/www.hao123.com'" >hao123 首页 </a> 这 个 超 链接 ， 可 以 打开 hao123 的 首页 。 

03 </body> 

该 实例 中 ,定义 了 一 个 超 链接 用 来 链接 hao123 站 点 的 首页 。 其 运行 后 的 显示 效果 如 图 8-1 
所 示 。 链 接 内 容 以 有 颜色 的 字 显示 ， 用 来 区 分 其 他 没有 链接 的 内 容 。 当 用 鼠标 单 击 含 有 链接 的 
内 容 后 ， 就 会 跳 转 到 hao123 的 首页 ， 其 显示 效果 如 图 8 2 2 所 示 。 


ET 汪汪 二 am 得 瞪 o 3 


GAO 


天 是 夯 [ 同 n wy Deemer 


入 Ee 这 个 相近, 可 以 打开 hao123 的 首 习 


| 
加 


立 HMtp /fe hsotz[ | 三 二 [人 YConyatar 


图 8-1 ”使 用 超 链接 的 显示 效果 图 8-2 使 用 超 链接 打开 新 页 面 的 显示 效果 
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链接 元 素 


8.1.2 路径 url 


路 径 url 用 来 定义 一 个 文件 、 内 容 或 者 媒体 等 的 所 在 地 址 。 这 个 地 址 可 以 是 相对 链接 ， 也 
可 以 是 一 个 网 络 中 的 绝对 地 址 。 下 面 是 一 个 使 用 路 径 的 实例 。 其 代码 如 下 所 示 。 


ba url.html 


01 <body> 
02 图 片 中 的 路 径 : <img sre="picjpg" width="150" /> 
03 <br 广 <br 廊 


04 背景 中 的 路 径 : <table border="2" width="240" height="100" 
background="http://www.haol123.com/images/logo_140.gif> 


05 <t> 
06 ”<td> 链 接 的 三 种 情况 </td> 
07 </tr> 

08 </table> 

09 <br> 


10 ”链接 中 的 路 径 ，<a hre 仁 "http://www.hao123.com"> 链 接 内 容 </a> 


11 </body> 


该 实例 中 ，02、04、10 行 是 在 各 种 页 面 元 素 中 使 用 路 径 的 方法 。 其 运行 后 的 显示 效果 如 


8-3 所 示 。 


再 来 看 两 行 代码 ， 这 两 行 代码 里 应 用 了 绝对 链接 的 写法 。 


01 <img src="FNAHTmlhtml 跟 我 学 picjpg" width="150" /> 
02 ”<a hre 合 "http:/www-hao123.com'"> 


绝对 链接 也 称 为 绝对 路 径 ， 绝 对 路 径 就 是 主页 上 的 文件 或 目录 在 硬盘 上 真正 的 路 径 。 使 用 


绝对 路 径 定位 链接 目标 文件 比较 清晰 ， 但 是 绝对 路 
径 有 两 个 缺点 : 一 是 需要 输入 更 多 的 内 容 ， 二 是 如 
果 该 文件 被 移动 了 ， 就 需要 重新 设置 所 有 的 相关 链 
接 。 当 然 使 用 网 上 地 址 是 没 问 题 的 ， 但 是 上 两 行 代 
码 中 的 图 片 到 了 网 上 就 不 可 用 了 。 这 是 因为 路 径 设 
置 的 问题 。 这 里 的 路 径 为 “FANHTmlhtml 跟 我 学 
picjpg”, 在 本 地 确实 可 以 找到 , 但 是 到 了 网 站 上 该 
文件 不 一 定 在 这 个 路 径 下 ， 所 以 就 会 出 问题 。 这 时 
候 就 需要 用 到 相对 路 径 ， 相 对 路 径 用 来 指定 内 容 的 
相对 地 址 。 这 个 地 址 可 以 是 相对 于 文档 所 在 的 当前 
目录 ， 也 可 以 是 相对 于 指定 的 基本 的 路 径 。 在 相对 
路 径 中 ， 一 般 可 以 忽略 HTTP 协议 和 域名 等 内 容 ， 

直接 使 用 文件 的 相对 地 址 就 可 以 。 例 如 ， 可 以 使 用 
如 下 所 示 的 链接 路 径 。 


<a hre 人 ="images/pic.jpg'"> 链 接 内 容 </a> 


沁 无 标 是 文档 -Wicrosoft 工 zylerer Dlx 
ET TE TE 
REN EIEN FE 
| 地址 名 次 ]n wy necmentsavatiued-z al 吕 ] 国 秆 到 | 链接 2 
图 片 中 的 路 径 ， 
背景 中 的 路 径 ， 
能 接 多 云天 摘 吕 -Www hao12 
链接 中 的 路 径 ， 链 接 内 容 

| 
Eg Ci corter 易 


8-3 各 种 元 素 中 使 用 路 径 的 显示 效果 
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下 面 是 一 个 使 用 相对 路 径 的 实例 。 其 代码 如 下 所 示 。 


be relative-url.html 


01 <body> 
链接 中 使 用 相对 路 径 : <a hre 人 "picjpg" target="_blank">*……* </a> 
02 </body> 


在 该 实例 中 ， 链 接 的 地 址 是 一 个 相同 文件 夹 里 的 图 片 文件 。 其 代码 运行 后 ， 单 击 链接 文本 
时 的 显示 效果 如 图 8-4 所 示 。 


ETEEEEIZERIOTETTETT te/ 
廊 件 四 ”二 乱 下) 查看 ~ 
~ ED eats 
思量 -名 - EEC 本 
Bw le w 


SD RE Holt 
链接 中 使 用 相对 路 径 ， 链 接 内 容 。 | 潜 加 | 加 了 Wy poements eic Tc 相国 生计 二 ” 


| 


而 Bm 


BE 
图 8-4 ”使 用 相对 链接 的 显示 效果 


8.1.3 HTTP 路 径 
HTTP 路 径 用 来 链接 Web 服务 器 中 的 文档 。 下 面 是 HTTP 路 径 可 以 使 用 的 写法 。 
http:// 域 名 /目录 /目标 文件 
http:// 域 名 /目录 /目标 文件 # 片 段 


http:// 域 名 /目录 /目标 文件 ? 变量 名 = 变量 参数 


其 中 第 一 种 链接 是 最 普通 的 链接 格式 , 不 使 用 任何 参数 和 变量 。 第 二 种 是 链接 到 目标 文件 
的 某 个 一 个 片段 的 位 置 上 。 第 三 种 是 传递 某 个 参数 ， 使 用 相应 的 程序 来 处 理 相关 内 容 。 下 面 是 
一 个 使 用 普通 HTTP 路 径 的 实例 。 其 代码 如 下 所 示 。 
例 程 8-4 http .html 

01 <body> 


链接 地 址 : <a hre 全 "http:/www.baidu.conyindexphp?tmn=myppcb&bar=11"> 链 接 </a> 
02 </body> 


其 代码 运行 后 ， 当 单 击 含有 链接 的 文本 时 ， 显 示 效 果 如 图 8-5 所 示 。 
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站 加 天 页 驴 吧 入 站 MP3 避 具 秽 旺 


2 haol2s | Ee 


8-5 使 用 普通 HTTP 路 径 的 显示 效果 


8.1.4 ”FTP 路径 

FTP 路 径 用 来 链接 FTP(File Transfer Protocol, 文件 传输 协议 ) 服 务 器 中 的 文档 。 下 面 是 FIP 
路 径 可 以 使 用 的 写法 。 

<A hre 人 "fip:/……"> 链 接 文字 </A> 


其 中 域名 和 人 P 地 址 其 实 是 服务 器 地 址 的 两 种 写法 ， 都 代表 网 络 中 唯一 的 标识 。 如 果 要 在 
网 页 中 使 用 FTP 链接 ， 要 使 用 如 下 的 写法 。 


fp://fip 域名 /目录 


使 用 FTP 路 径 时 ， 可 以 在 浏览 器 中 直接 输入 相应 的 FTP 地 址 ， 打 开 相应 的 目录 或 者 下 载 
相关 内 容 。 也 可 以 使 用 相关 的 软件 ， 打 开 FTP 地 址 中 相应 的 目录 或 者 下 载 相关 内 容 。 
下 面 是 一 个 使 用 FTP 路 径 的 实例 。 其 代码 如 下 所 示 。 


fp .html 


01 <body> 
链接 中 使 用 邮件 路 径 : <a hre 人 "ftp://fp zjuedu.cn" target=" blank"> 链 接 内 容 </a> 

02 </body> 

该 实例 中 , 链接 了 浙江 大 学 的 FIP 站 点 。 其 
代码 运行 后 ， 当 单 击 含有 链接 的 文本 时 ， 显 示 效 
果 如 图 8-6 所 示 。 

从 图 8-6 可 以 看 出 , 此 时 打开 一 个 新 的 窗口 ， 
显示 了 此 目录 下 所 有 的 文件 ， 可 以 使 用 复制 、 粘 
贴 功能 , 或 者 借助 下 载 软件 来 下 载 目录 中 的 内 容 。 


8.1.5 邮件 路 径 
邮件 路 径 用 来 链接 一 个 电子 邮件 的 地 址 。 下 


8-6 使 用 FTP 路 径路 径 的 显示 效果 
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面 是 邮件 路 径 可 以 使 用 的 写法 。 
mailto: 邮 件 地 址 
下 面 是 一 个 使 用 邮件 路 径 的 实例 。 其 代码 如 下 所 示 。 


email.html 


01 <body> 
使 用 邮件 路 径 ，<a hre 全 "mailto:sucess1123@126.com"> 链 接 </a> 
02 </body> 


8-7 使 用 邮件 路 径 的 显示 效果 


当 单 击 含有 链接 的 内 容 后 ， 会 弹出 一 个 发 送 邮件 的 对 话 框 (实例 中 使 用 的 是 Windows 操作 
系统 )。 


@.2 | 链接 元 素 <a> 


链接 元 素 <a> 用 来 定义 一 个 超 链接 。8.1 节 使 用 链接 时 已 经 用 到 <a> 元 素 , 其 实在 <a> 元 素 中 ， 
不 但 可 以 包含 文本 内 容 ， 也 可 以 包含 图 片 等 其 他 内 容 。 语 法 结构 如 下 所 示 。 


<a hre 全 "链接 的 路 径 "> 链接 的 文本 </a> 


在 <a> 元 素 中 ， 一 般 要 指定 href 属性 ， 用 来 指向 链接 的 目标 。 下 面 是 一 个 使 用 <a> 元 素 的 
实例 。 其 代码 如 下 所 示 。 


a.html 


01 <body> 
链接 元 素 : <a hre 仁 "http://www.baidu.com'"> 链 接 内 容 </a> 
02 </body> 
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链接 元 素 


其 代码 运行 后 ， 显 示 效果 如 图 8.8 所 示 。 当 单 击 页 面 中 含有 链接 的 文本 时 ， 显 示 效 果 如 图 
8-9 所 示 。 
。 户 注 意 
此 时 由 于 <a> 元 素 中 没有 定义 其 他 任何 属性 , 所 以 链接 的 目标 页 面 将 在 <a> 元 素 所 
在 的 页 面 中 打开 ， 而 不 会 弹出 新 的 页 而 ， 
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Bai 久 天 


新 闻 网 页 贴吧 知道 MP3 图 片 视频 


富 本 hao123 | 更 多 > 
a ls 人 
mini ml CA 下 厢 男 醒 本 本 面 [LETCZT 加 
图 8-8 ”使 用 <a> 元 素 的 显示 效果 图 8-9 单 击 链接 文本 后 的 显示 效果 


<a> 元 素 中 可 以 使 用 的 所 有 属性 如 表 8-1 所 示 。 


表 8-1_<a> 元 素 的 所 有 属性 


属性 名 称 到 
文本 显示 方向 属性 dir 
指定 语言 属性 lang 
类 属性 class 
定义 级 联 样式 属性 style 
名 称 属性 name 
标题 属性 title 
标记 属性 id 
指定 路 径 属性 href 
目标 文件 语言 属性 hreflang 
指定 目标 文档 类 型 属性 type 


链接 快捷 键 属性 accesskey 
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( 续 表 ) 


属性 名 称 
激活 顺序 属性 
指定 目标 文件 编码 属性 
显示 链接 目标 属性 
源 文档 到 目标 文档 关系 属性 
目标 文档 到 源 文档 关系 属性 
敏感 区 域 坐标 属性 
敏感 区 域 形状 属性 


了 其 中 coords 属性 和 shape 属性 ， 将 在 讲解 <map> 元 素 的 使 用 时 具体 介绍 。 


8.2.1 指定 路 径 属性 href 

指定 路 径 属 性 href 用 来 指定 链接 元 素 <a> 的 目标 地 址 。 从 上 面 路 径 的 知识 可 以 知道 ， 此 时 
使 用 的 路 径 可 以 包含 8.1 节 中 所 讲解 的 所 有 路 径 。 语 法 结构 如 下 所 示 。 

<a hre 合 "链接 的 路 径 "> 链接 的 文本 </a> 


下 面 是 一 个 使 用 href 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb a-href html 


01 <body> 
链接 元 素 : <a hre 合 "http://www.hao123.com/"> 链 接 内 容 </a> 
02 </body> 
其 代码 运行 后 ， 显 示 效 果 如 图 8-10 所 示 。 当 单 击 图 8-10 中 含有 链接 的 文本 时 ， 显 示 效 果 
如 图 8-11 所 示 。 


EE=a ET TE 
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EC 
EE 


链接 元 素 ， 链接 内 容 


网 址 之 家 避 rm 一 


[www.hao123.comsB 


BE CT TT (See | 碳 [CT I 加 


图 8-10 使 用 href 属 性 的 显示 效果 图 8-11 单 击 链接 文本 后 的 显示 效果 
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链接 元 素 


8.2.2 显示 链接 目标 属性 target 


显示 链接 目标 属性 target 用 来 指定 链接 目标 文件 显示 的 窗口 。 语 法 结构 如 下 所 示 。 
<a href- 链接 的 路 径 " target=" 目 标 窗口 或 指定 值 "> 链接 的 文本 <a> 


target 属性 中 的 取 值 有 _self、_blank、_parent 和 top。 
下 面 通过 实例 演示 下 每 个 属性 值 的 表现 效果 。 当 target 属性 取 值 为 “ self” 时 ， 其 代码 如 
下 所 示 。 


a-target.html 
01 <body> 
链接 元 素 : 链接 内 容 <a hre 人 "http/www .baidu.comy/" targef=" self'> 链 接 内 容 </a> 
02 </body> 
其 代码 运行 后 ， 显 示 效 果 如 图 8-12 所 示 。 当 单 击 页 面 中 含有 链接 的 文本 时 ， 页 面 跳 转 ， 
显示 效果 如 图 8-13 所 示 。 


本 百度 一 下 ,你 走 知 道 - Wi creseft Internet Explorer =jgjx| 
soft_Interaet Erplorer 了 6 可 文件 吕 ” 编 强 ) 查 看 收藏) 工具 WD) 帮助 0 下 3 
文件 中 轴 报 @) 查看 0 收效) 工具) 帮助 0 下 [< 
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新 闻 网 页 贴吧 知道 MP3 图 片 视频 


宝 间 hao123 | 更 多 >> 


过 人 一 | | 
TT a 部 男 硬 硬 而 面 LE 列 
图 8-12 使 用 target 属性 值 为 self 的 显示 效果 图 8-13 单 击 链接 文本 后 的 显示 效果 


当 target 属性 取 值 为 “blank” 时 ， 其 代码 如 下 所 示 。 


a-targettwo.html 

01 <body> 

链接 元 素 : 链接 地 址 <a hre 仁 "http://www.baidu.com/" target="” blank"> 链 接地 址 </a> 

02 </body> 

其 代码 运行 后 ， 当 单 击 含有 链接 的 内 容 时 ， 新 的 内 容 会 在 新 的 窗口 显示 ， 而 不 会 覆盖 原 窗 
口 的 内 容 ， 其 显示 效果 如 图 8-14 所 示 。 

当 target 属性 取 值 为 ”parent” 和 “ top” 时 ， 其 显示 效果 和 使 用 “_self” 值 相同 ， 均 为 
在 当前 窗口 中 显示 目标 页 面 。 
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四 hao123 | 更 多 >> 


图 8-14 使 用 target 属性 值 为 blank 的 显示 效果 


8.2.3 激活 顺序 属性 tabindex 


激活 顺序 属性 tabindex 用 来 指定 当 按 下 Tab 键 时 ， 页 面 中 链接 的 激活 顺序 。 语 法 结构 如 下 
所 示 。 
<a hre 全 "链接 的 路 径 " tabindex=" 数 字 值 "> 链接 的 文本 </a> 


tabindex 属性 的 取 值 是 大 于 0 的 整数 。 下 面 是 一 个 使 用 tabindex 属性 的 实例 。 其 代码 如 下 
所 示 。 


a-tabindex.html 


<body> 
02 ”链接 路 径 1，<a hre 全 "http:/www baidu.com' tabindex="2"> 链 接 内 容 </a><br 亡 
03 ”链接 路 径 2，<a hre 人 "http:/www hao123.com' tabindex="3 必 链接 内 容 </a><br /> 
04 ”链接 路 径 3，<a hre 全 "http:/www.sinacom' tabindex="1"> 链 接 内 容 </a> 
05 </body> 


其 代码 运行 后 ， 生生 的 Tab 刍 柯 以 依次 洲 滞 册 轩 中 的 尖 近 4 如 图 8-15 所 示 。 


图 8-15 使 用 tabindex 属性 的 显示 效果 
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当 按 下 Tab 键 时 ， 页 面 中 链接 元 素 2 被 激活 ， 如 图 8-16 所 示 。 此 时 ， 按 Enter 键 可 以 打开 
链接 ， 其 显示 效果 如 图 8-17 所 示 。 


图 8-16 按 Tab 键 激活 链接 后 的 显示 效果 图 8-17 按 Enter 打开 链接 后 的 显示 效果 


8.2.4 ”链接 的 热 键 属 性 accesskey 
链接 的 热 键 属性 accesskey 用 来 指定 激活 链接 所 使 用 的 键 。 语 法 结构 如 下 所 示 。 
<a hre 全 "链接 的 路 径 " accesskey=" 键 盘 上 的 键 值 "> 链 接 的 文本 </a> 


由 于 用 户 使 用 的 操作 系统 不 同 , 要 在 键盘 上 按 下 相应 的 键 (Window 中 为 Alt 键 ), 同时 按 下 
定义 的 热 键 ， 才 能 激活 定义 的 链接 。 链 接 激活 后 ， 按 下 键盘 的 Enter 键 ， 打 开 相 应 的 链接 。 
下 面 是 一 个 使 用 accesskey 属性 的 实例 。 其 代码 如 下 所 示 。 


TE i 

02 ”链接 元 素 : <a hre 仁 "http://www.google.com" accesskey="a"> 链 接 内 容 </a> 

03 <body> 

其 代码 运行 后 ， 显 示 效果 ， 如 图 8-18 所 示 。 当 同时 按 下 键盘 上 的 Alt+Z 键 时 ， 链 接 文本 
被 激活 ， 其 显示 效果 如 图 8-19 所 示 。 


图 8-18 ”使 用 accesskey 属性 的 显示 效果 图 8-19 链接 文本 被 激活 后 的 显示 效果 
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从 图 8-19 可 以 看 出 ， 激 活 的 链接 文本 会 在 文本 上 产生 一 个 虚线 框 ， 用 来 表明 该 链接 已 经 
被 激活 。 当 按 下 Enter 键 时 ， 可 以 打开 链接 的 页 面 ， 如 图 8-20 所 示 。 


新 闻 网 页 贴吧 知道 MP3 图 片 


空 昌 hao123 | | 


图 8-20 按 下 Enter 键 打 开 寻 接 后 的 显示 效果 


8.3| 图 像 链接 


图 像 中 的 链接 ， 包 括 为 图 像 元 素 制作 链接 和 在 图 像 的 局 部 制作 链接 。 其 中 在 图 像 的 局 部 制 
作 链 接 比 较 复杂 ， 将 会 使 用 到 <map>、<area> 等 元 素 及 其 相关 属性 。 下 面 进行 详细 讲解 。 


8.3.1 创建 链接 区 域 元 素 <map> 


创建 链接 区 域 元 素 <map> 用 来 在 图 像 元 素 中 定义 一 个 链接 区 域 。<map> 元 素 本 身 并 不 能 指 
定 链接 区 域 的 大 小 和 链接 目标 ，<map> 元 素 的 主要 作用 是 用 来 标记 链接 区 域 。 页 面 中 的 图 像 元 
素 可 以 使 用 <map> 元 素 标记 的 区 域 。 语 法 结构 如 下 所 示 。 


<map> 其 他 元 素 </map> 
<map> 元 素 一 般 要 结合 <area> 元 素 一 起 使 用 , 将 在 讲解 <area> 元 素 时 (8.3.3 节 ) 再 做 实例 演示 。 


8.3.2 ”链接 区 域 的 名 称 属性 name 
链接 区 域 的 名 称 属性 name 用 来 定义 链接 区 域 的 名 称 ， 方 便 图 像 元 素 的 调用 。 语 法 结构 如 
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链接 元 素 


<map name=" 名 称 "> 其 他 元 素 <map> 
name 属性 的 实例 演示 ， 将 在 8.3.3 节 中 讲解 。 


8.3.3 ”定义 鼠标 敏感 区 元 素 <area> 
定义 鼠标 敏感 区 元 素 <area> 用 来 定义 链接 区 域 的 大 小 和 坐标 ， 同 时 可 以 指定 每 个 敏感 
的 链接 目标 。 语 法 结构 如 下 所 示 。 
<map name=" 名 称 "> 
<area 属性 =" 属 性 值 " 上 > 
</map> 


下 面 是 一 个 使 用 <area> 元 素 的 实例 。 其 代码 如 下 所 示 。 
area.html 


区 
荡 


01 <body> 

02 ”<img sre="pic.jpg" alt=" 雷 峰 塔 " border="0" usemap="#Map" /> 

03 <map name="Map" id="Map"> 

04 <area shape="rect" coords="27,20,132,122" href="http://www.baidu.com" /> 
05 <area shape="rect" coords="226,61,322,200" href="http://www.haol123.com" /> 
06 <area shape="circle" coords="114,235,52" href="http://www.sina.com" /> 

07 </map> 

08 </body> 


该 实例 中 ， 在 图 片 中 定义 了 3 个 链接 区 域 ， 分 别 链接 到 百度 、 谷 歌 和 W3C 的 站 点 首页 。 
在 图 片 的 局 部 制作 链接 后 ， 对 图 片 的 显示 效果 并 没有 影响 。 其 代码 运行 后 ， 显 示 效 果 如 图 8-21 
所 示 。 
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图 8-21 局 部 定义 链接 后 的 图 像 元 素 


<area> 元 素 中 可 以 使 用 的 所 有 属性 如 表 8-2 所 示 。 
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表 8-2 ”<area> 元 素 的 所 有 属性 


属性 名 称 Sa 
文本 显示 方向 属性 dir 
指定 语言 属性 lang 
类 属性 class 
定义 级 联 样式 属性 style 
名 称 属性 name 
标题 属性 title 
标记 属性 id 
指定 路 径 属性 href 
不 指定 路 径 属 性 nohref 
链接 的 文本 说 明 属性 alt 
链接 快捷 键 属性 accesske' 
激活 顺序 属性 tabindex 
敏感 区 域 坐标 属性 coords 
敏感 区 域 形 状 属性 shape 


8.3.4 ”链接 的 路 径 属性 href、nohref 
指定 路 径 属 性 href 用 来 指定 链接 的 地 址 。 不 指定 路 径 属 性 nohref 用 来 不 指定 链接 的 地 址 。 
其 中 href 属性 和 <a> 元 素 中 完全 相同 。 使 用 指定 路 径 属性 href 的 语法 如 下 所 示 。 


<map name=" 名 称 "> 
<area hre 全 "指定 的 路 径 " 上 > 
</map> 


不 指定 路 径 属性 nohref 的 语法 如 下 所 示 。 
<map name=" 名 称 "> 


<area nohref="nohref" /> 
</map> 


下 面 是 一 个 在 <area> 元 素 中 使 用 nohref 属性 的 实例 。 其 代码 如 下 所 示 。 
area-href.html 


01 <body> 

02 <img src="pic.jpg" alt=" 雷 峰 塔 " border="0" usemap="#Map" /> 

03 <map name="Map"id="Map"> 

04 <area shape="rect" coords="27,20,132,122" hre="http://www.baidu.com" > 
05 <area shape="rect" coords="226.61.322.200" hre 人 ="http://www.haol123.com" /> 
06 <area shape="circle" coords="114,235,52" hre 人 ="http://www.sina.com" /> 

07 </map> 
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08 </body> 
使 用 了 nohref 属性 的 区 域 ， 当 鼠标 悬 停 时 ， 将 不 再 显示 “ 手 ” 的 形状 。 


8.3.5 ”链接 的 文本 说 明 属 性 alt 


链接 的 文本 说 明 属 性 alt 用 来 使 用 附加 的 文本 对 链接 进行 说 明 。 和 <img> 元 素 里 的 alt 属性 
类 似 ， 当 鼠标 悬 停 在 某 个 链接 区 域 时 ， 将 会 显示 出 al 属性 中 附加 的 文本 。 语 法 结构 如 下 所 示 。 


<map name=" 名 称 "> 
<area alt=" 附 加 的 文本 " 上 > 
</map> 


下 面 是 一 个 在 <area> 元 素 中 使 用 alt 属性 的 实例 。 其 代码 如 下 所 示 。 
area-alt.html 


01 <body> 

02 <img src="picjpg" alt=" 雷 峰 塔 " border="0" usemap="#Map" /> 

03 <map name="Map" id="Map"> 

04 ”<area shape="rect" coords="30,21,132,112" hre 人 "http://www.baidu.com" alt=" 左 侧 链接 百度 " /> 

05 <area shape="rect" coords="221.62.312.210" hre 人 ="http://www.hao123.com" alt=" 右 侧 链接 hao123" /> 
06 <area shape="circle" coords="104,245,54" hre 信 "http://www.sina.com" alt=" 底 部 链接 新 浪 " /> 


07 </map> 
08 </body> 
其 代码 运行 后 ， 当 鼠标 晤 停 在 相应 区 。 |EEEEEEEDEETECTCTE ~ 
© 加 名 多 Oo 吧 | 
域 时 ， 会 出 现 相应 的 链接 。 显 示 效果 如 图 ”| 加 下 Ej] nn nC 
8.22 所 示 。 [si Ey nome ern Shon SED EE 


8.3.6 ”鼠标 敏感 区 坐标 属性 coords 


鼠标 敏感 区 坐标 属性 coords 用 来 定义 
鼠标 敏感 区 域 的 大 小 和 位 置 。 根 据 敏感 区 
域 的 形状 不 同 ， 所 使 用 的 坐标 数目 也 会 有 
所 变化 。 语 法 结构 如 下 所 示 。 


<map name=" 名 称 "> 
<area coords-" 区 域 坐标 组 " /> [ml ml ml ml mE L223 


SA 图 822 <area> 元 素 中 使 用 alt 属性 的 图 像 元 素 
对 应 不 同形 状 的 敏感 区 域 ， 其 坐标 的 具体 定义 方法 如 下 所 示 。 

1. 矩形 区 域 

定义 一 个 矩形 区 域 要 使 用 4 个 坐标 来 实现 ， 其 形式 如 下 所 示 。 


coords="x1,y1,x2,;y2" 
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每 个 坐标 之 间 用 英文 的 逗号 分 隔 ， 其 中 x1、yl 表示 矩形 区 域 丰 上 角 的 坐标 ，x2、 了 2 表示 
和 矩形 区 域 右 下 角 的 坐标 。 图 片 的 左上 和 角 是 坐标 的 原点 ， 其 坐标 为 “0.0”。 


2. 圆 形 区 域 
定义 一 个 圆 形 区 域 要 使 用 3 个 坐标 来 实现 ， 其 形式 如 下 所 示 。 
Coords="x,y,r" 


每 个 坐标 之 间 用 英文 的 逗号 分 隔 ， 其 中 x、y 坐标 表示 圆 形 区 域 圆心 的 坐标 , r 表示 圆 形 区 
域 的 半径 的 长 度 。 

3. 多 边 形 区 域 

定义 一 个 多 边 形 区 域 要 使 用 和 顶点 数目 相同 的 坐标 组 来 实现 ， 其 形式 如 下 所 示 。 

coords="x1,y1, x2,y2..." 

每 个 坐标 之 间 用 英文 的 逗号 分 隔 ， 其 中 每 组 x、y 坐标 表示 多 边 形 区 域 的 一 个 顶点 。 

下 面 是 一 个 在 <area> 元 素 使 用 coords 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb area-coords.html 


01 <body> 

02 ”<img ste="pic.jpg" al=" 雷 峰 塔 " border="0" usemap="#Map" /> 

03 <map name="Map"id="Map"> 

04 <area shape="circle" coords="154,221,,62" hre 全 "http:/www.baidu.com' alt=" 左 侧 链 接 百 度 " /> 

05 <area shape="rect" coords="221,62,312,210" hre 人 ="http://www.hao123.com" alt=" 右 侧 链 接 hao123" /> 
06 <area shape="rect" coords="24,25,123,134" hre="http://www.sina.com" alt=" 底 部 链接 新 浪 " /> 

07 </map> 

08 </body> 


其 代码 运行 后 ， 按 下 Tab 键 ， 可 以 激活 链接 区 域 ， 其 中 第 一 个 圆 形 区 域 的 显示 效果 如 图 
8-23 所 示 。 按 照 同样 的 方法 ， ELE dl 8-24 所 示 。 

3 icroso =lolxl 无 标题 文档 - icrosoft Internet ER 

文件 中， 编辑 下) 查看 WD TRD hw ra Er 0 | | 


a Ee OO dm um “ 


| 地址 四) [和 ty nocmentswoevntitlet-l6 hm | 回转 到 | 链接 >” 


于 Mo fm [| Ty Cmpter 


图 8-23 ”<area> 元 素 中 使 用 coords 属性 的 显示 效果 1 图 8-24 ”<area> 元 素 中 使 用 coords 属性 的 显示 效果 2 


Ti cpater 
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8.3.7 ”鼠标 敏感 区 形状 属性 shape 


鼠标 敏感 区 形状 属性 shape 用 来 定义 鼠标 敏感 区 域 形 状 。 其 具体 的 大 小 和 位 置 要 使 用 
coords 属性 定义 。 语 法 结构 如 下 所 示 。 


<map name=" 名 称 "> 
<area shape-" 形 状 " 记 
</map> 


shape 属性 的 显示 效果 ，8.3.6 节 的 实例 8-16 已 经 用 过 ， 读 者 可 以 回顾 8.3.6 节 所 学 内 容 。 
8.3.8 使 用 图 片 中 的 链接 
综合 使 用 <img> 元 素 、<map> 元 素 和 <area> 元 素 制作 一 个 图 片 局 部 的 链接 。 语 法 结构 如 下 
所 示 。 
<img sre=" 图 片 路 径 " usermap="map 中 定义 的 name 或 id" 户 
<map name=" 名 称 " id- "标记 "> 
<area hre 全 "路径 " cords= "坐标 组 " shape=" 形 状 " /> 
</map> 
户 注意 
1 其 中 <img> 元 素 中 usermap 属性 的 取 值 中 ， 要 在 具体 值 前 加 “#” 号 。 | 


下 面 是 一 个 制作 图 片 局 部 链接 的 实例 。 其 代码 如 下 所 示 。 


img-use-link.html 
01 <body> 
02 ”<img ste="pic.jpg" alt=" 老 虎 " border="0" usemap="#Map" /> 
03 <map name="Map"id="Map"> 
04 ”<area shape="rect" coords="27.20.132.122" href-"http://www baidu.comy' alt=" 链 接 1" target="_blank" /> 
05 <area shape="rect" coords="226,61,322,200" href="http://www.google.com" alt=" 链 接 2" /> 
06 <area shape="circle" coords="114,235,52" hre 全 "http://www.w3.org" alt=" 链 接 3" /> 
07 </map> 
08 </body> 


EL ER. 由 康 罗 工具 人 D) Er 


Os. OID Pm 
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图 8-25 图 片 局 部 链接 的 显示 效果 
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8.4 本 章 习 题 


= 选择 题 
1. 在 网 页 中 ， 必 须 使 用 ( “) 标 记 来 完成 超级 链接 。 
A. <a>...</a>  B.<p>...<p> C. <link>...</link> D. <1>...</> 


2. 若 要 在 网 页 中 插入 样式 表 main.css， 以 下 用 法 中 ， 正 确 的 是 ( )。 
A. Link href= “main.css” type=text/css rel=stylesheet> 

B. <Link Src= “main.css” type=text/css rel=stylesheet> 

C. <Link href= “main.css” type=text/css> 

D. <Include hre= “main.css” type=text/css rel=stylesheet> 

二 、 填 空 题 


1. 如 果 要 创建 一 个 指向 电子 邮件 someone@mail.com 的 超 链接 ， 代 码 应 该 如 下 : _ _。 

2. 在 给 图 像 指定 超 链接 时 ， 默 认 情 况 下 总 是 会 显示 蓝 色 边框 ， 如 果 不 想 显示 蓝 色 边框 ， 
应 使 用 以 下 语句: 

3. 在 指定 页 内 超 链 接 时 ， 如 果 在 某 一 个 位 置 使 用 了 <a 一 "targetl"> 锚 点 </a> 语 句 
定义 了 锚 点 ， 那 么 应 使 用 以 下 语句 ， 以 便 在 单 击 超 链接 时 跳 转 到 锚 点 定义 的 位 置 : <a hre 仁 _ 

>。 

4. 创建 超 链接 时 ， 要 使 目标 文件 在 一 个 新 窗口 中 打开 ， 应 使 用 <a hrefrtesthtm 5 

5. 设置 超 链接 的 目标 框架 时 ， 除 了 可 以 使 用 特殊 框架 名 ， 还 可 以 使 用 框架 集 文 件 中 标记 
符 指定 的 name 属性 所 对 应 的 框架 。 


三 、 实 战 练习 


1. 使 用 激活 顺序 属性 tabindex 设置 一 个 页 面 ， 链 接 3 个 不 同 的 网 址 。 
2. 使 用 鼠标 敏感 区 元 素 <area>， 用 1 个 图 像 链接 3 个 不 同 的 网 址 。 
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表 里 元 泰 


表单 元 素 是 页 面 中 用 来 提供 用 户 交互 的 主要 方法 。 一 般 将 表单 设计 在 一 个 HIML 文档 中 ， 
当 用 户 填写 完 信息 后 做 提交 操作 ， 于 是 表单 的 内 容 就 从 客户 端的 浏览 器 传送 到 服务 器 上 ， 经 过 
服务 器 上 处 理 程序 处 理 后 ， 再 将 用 户 所 需 信息 传送 回 客 户 端的 浏览 器 上 ， 这 样 网 页 就 具有 了 交 
互 性 。 


在 网 页 中 ， 最 常见 的 表单 形式 主要 包括 文本 框 、 单 选 按钮 、 复 选项 、 按 钮 等 。 如 图 9-1 所 
示 ， 在 新 浪 的 主页 中 ， 就 包含 了 文本 框 、 按 钮 、 下 拉 列 表 等 表单 内 容 。 


新 闻 军事 社会 体育 IEA 彩票 二 者 苦 相 执 文 读书 教 育 出 加 空间 
Snoanmem 册 绍 贞 更 其 会 损 乐 明星 音乐 女性 县 库 育儿 论坛 
北京 万 早 13C~2fC 科技 手机 数码 汽车 购车 搜 车 房产 寄居 健康 乐 库 沿 品 宠物 交友 


ee 


图 9-1 新 浪 首页 


SS 


泊 、 本 章 主要 内 容 有 : 


@ ”熟练 掌握 表单 元 素 的 各 个 属性 。 
@ 重点 掌握 表单 中 的 按钮 属性 。 
@ 能 够 自由 应 用 表单 元 素 的 各 个 属性 并 能 制作 相应 的 表单 。 


跟 我 学 HTML+CSS 


9. 了 | 表单 元 素 <form> 


在 HIML 中 , <form></form> 标 志 对 用 来 创建 一 个 表单 , 也 即 定义 表单 的 开始 和 结束 位 置 ， 
在 标志 对 之 间 的 一 切 都 属于 表单 的 内 容 。<form> 元 素 可 以 在 页 面 中 任何 位 置 使 用 ， 当 其 中 没有 
任何 控件 时 ， 本 身 并 没有 表现 效果 。 语 法 结构 如 下 所 示 。 


| 忆 注意 

在 网 页 中 ,<form> 元 素 一 般 要 包含 至 少 一 个 表单 控件 ,每 个 表单 元 素 开始 于 form 
元 素 ， 可 以 包含 所 有 的 表单 控件 ， 还 有 任何 必需 的 伴随 数据 ， 如 控件 的 标签 、 处 理 数 
据 的 脚本 或 程序 的 位 置 等 。 在 表单 的 <form> 标 记 中 还 可 以 设置 表单 的 基本 属性 ， 包 括 
表单 的 名 称 、 处 理 程序 、 传 送 方法 等 一 般 情况 下 ， 表 单 的 处 理 程序 action 和 传送 广 
法 method 是 必 不 可 少 的 参数 。 


下 面 是 一 个 使 用 <form> 元 素 的 实例 。 其 代码 如 下 所 示 。 
[ 例 程 9-1| form.html 


01 <body> 

02 <form action="#" method="post"> 

03 <divid="forml"> 

04 ”<h3> 注 册 信息 </h3> 

用 户 姓 名 : 

05 ”<input type="text" value=" 请 填写 姓名 " size="20" name="namel" /><br /> 
个 人 说 明 : 

06 <input type="text" value=" 请 用 4 个 字 概 括 自己 " size="20" name="name2" /><br /> 
个 性 签名 : 

07 <textarea name="name3" cols="40" rows="10"></textarea> 

08 ”<p> 写 出 自己 的 心声 </p> 

09 <div> 

10 </form> 


11 </body> 
该 实例 中 ,05 和 07 行 中 分 别 使 用 了 <input> 


元 素 和 <textarea> 元 素 。 其 运行 后 的 显示 效果 如 
图 9-2 所 示 。 


9.1.1 动作 属性 action 


动作 属性 action 用 来 指定 处 理 表单 的 程序 | | 
的 路 径 。 一 般 情况 下 , action 属性 主要 用 来 处 理 he | 
-= CT ye | 


通关 祝 息 ， 
用 户 通过 表单 提交 的 信息 ， 如 保存 、 回 复 等 国史. 使 用 fom: 元 玉 的 品 示 并 时 
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全 


| 久 注意 


| action 属性 是 <form> 元 素 中 必须 定义 的 属性 。 


语法 结构 如 下 所 示 。 
<form action=" 表单 的 处 理 程序 "> 其 他 元 素 </form> 


在 该 语法 中 ,表单 的 处 理 程序 定义 的 是 表单 要 提交 的 地 址 ， 也 就 是 表单 中 收集 到 的 资料 将 
要 传递 的 程序 地 址 。 这 一 地 址 可 以 是 绝对 地 址 ， 也 可 以 是 相对 地 址 ， 还 可 以 是 一 些 其 他 的 地 址 
形式 ， 如 发 送 E-mail 等 。 下 面 是 一 个 使 用 action 属性 的 实例 ， 其 代码 如 下 所 示 。 


Waa form-action.html 

01 <body> 

02 <form action="mailto:abcd@163.com"> 

03 <divid="forml"> 

04 ”<h3> 注 册 信 息 </h3> 

用 户 姓名 ， 

05 ”<input type="text" value=" 请 填写 姓名 " size="20" name="namel" /><br /> 
个 人 说 明 : 

06 <input type="text" value=" 请 用 4 个 字 概 括 自己 " size="20" name="name2" /><br /> 
个 性 签名 : 

07 <textarea name="name3" cols="40" rows="10"></textarea> 

08 ”<p> 写 出 自己 的 心声 </p> 

09 <div> 

10 </form> 

11 </body> 


该 实例 中 ， 指 定 处 理 回复 信息 的 程序 为 ee EE 
feedback.asp。 当 单 击 “ 提 交 ” 按 钮 后 ， 程 序 将 处 Ms 2 Dat we elG 
理 提交 的 信息 ， 并 返回 相应 的 内 容 。 由 于 服务 器 注册 信息 
端 程序 ， 不 是 本 书 讲解 的 内 容 ， 所 以 就 不 讲解 程 Rs 
序 的 处 理 方式 和 返回 内 容 了 。 在 <fomm> 元 素 中 使 
用 action 属性 ， 并 不 影响 <fonm> 元 素 中 内 容 的 显 


示 效 果 。 其 代码 运行 后 ， 显 示 效果 如 图 9-3 所 示 。 


个 性 答 全 ， 习 
写 出 自己 的 心声 
9.1.2 ”发 送 数据 方式 属性 method J 
sd 


表单 的 method 属性 用 来 定义 处 理 程序 从 表 ”图 9-3 <form> 元 素 中 使 用 action 属性 的 显示 效果 
单 中 获得 信息 的 方式 ， 可 取 值 为 get 和 post 的 其 

中 一 个 ， 它 决定 了 表单 中 已 收集 数据 是 用 什么 样 的 方法 发 送 到 服务 器 的 。 下 面 分 别 作 详 细 讲解 。 

> method=get: 使 用 这 个 设置 时 ， 表 单数 据 会 被 视 为 CGI 或 ASP 的 参数 发 送 ， 也 就 是 来 

访 者 输入 的 数据 会 附加 在 URL 之 后 , 由 用 户 端 直接 发 送 至 服务 器 , 所 以 速度 上 会 比 post 
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快 ， 但 缺点 是 数据 长 度 不 能 够 太 长 。 在 没有 指定 method 的 情形 下 一 般 都 会 视 get 为 默 
认 值 。 
> method-post: 使 用 这 种 设置 时 ， 表 单数 据 是 与 URL 分 开发 送 的 ， 用 户 端的 计算 机 会 通 
知 服务 器 来 读 取 数据 ， 所 以 通常 没有 数据 长 度 上 的 限制 ， 缺 点 是 速度 上 也 会 比 get 慢 。 
语法 结构 如 下 : 


<form method=" 传 送 方 式 '> 
“</form> 


Pm 
传送 方式 的 值 只 有 get 或 post 两 种 选择 。 | 


下 面 是 一 个 使 用 method 属性 的 实例 。 其 代码 如 下 所 示 。 


<body> 

02 ”<h3> 一 个 对 图 书馆 服务 回复 的 示例 </h3> 

03 <form action="mailto:sucessl11(@163.com" name="research" method="post"> 
用 户 姓名 : 

04 <input type="text" value=" 请 填写 姓名 " size="30" name="namel" /><br /> 
用 户 反馈 : 

05 <textarea cols="40"rows="10" name="namel"></textarea><br/> 

06 <input type="submit" value=" 提 交 " /> 

07 </form> 

08 </body> 


其 代码 运行 后 ， 显 示 效 果 (submit 属性 将 在 9.2.3 节 介 绍 ) 如 图 9-4 所 示 。 单 击 “ 提 交 ” 按 钮 
后 ， 其 显示 效果 如 图 9-5 所 示 。 


图 9-4 ”<form> 元 素 中 使 用 imethod 属性 的 显示 效果 图 9-5 提交 数据 后 的 显示 效果 
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9.1.3 名称 属性 name 


表单 名 称 属性 name 用 来 指定 表单 的 名 称 ， 标 记 某 个 表单 ， 方 便 程序 的 处 理 。 使 用 id 属性 
也 可 以 达到 相同 的 效果 , 为 了 兼容 Netspace, 最 好 同时 定义 name 和 id 属性 。 语 法 结构 如 下 所 示 。 


<form action=" 程 序 路 径 " name=" 名 称 "> 其 他 元 素 </form> 
下 面 是 一 个 使 用 name 属性 的 实例 。 其 代码 如 下 所 示 。 


lee form-name.html 


01 <body> 

02 ”<h3> 一 个 对 图 书馆 服务 回复 的 示例 </h3> 

03 <form action="mailto:abcd(@163.com" name="research" method="post"> 
用 户 姓名 : 

04 ”<input type="text" value=" 请 填写 姓名 " size="30" name="name1l" /><br /> 
用 户 反馈 : 

05 <textarea cols="40"rows="10" name="namel"></textarea><br /> 

06 <input type="submit" value=" 提 交 " /> 

07 </form> 

08 </body> 


使 用 name 属性 ， 对 表单 的 显示 效果 并 没有 任何 影响 。 


9.2 | 表单 控件 <input> 


表单 控件 元 素 <input> 用 来 在 页 面 中 定义 输入 内 容 (或 者 进行 选择 ) 的 部 分 。 其 中 根据 表现 效 
果 的 不 同 ， 可 以 分 为 文本 框 、 复 选 框 、 单 选 按钮 等 。 语 法 结构 如 下 所 示 。 


<input 属性 =" 属 性 值 " 上 > 
在 默认 情况 下 ，<input> 元 素 会 同文 本 、 图 片 等 元 素 同行 显示 。 


9.2.1 文本 域 text 


文本 域 中 <input> 元 素 的 type 属性 值 为 text， 其 主要 作用 是 用 来 提供 用 户 输入 文本 的 功能 。 
文本 域 只 能 单行 显示 。 超 出 定义 宽度 的 内 容 将 被 隐藏 。 语 法 结构 如 下 所 示 。 


<input type="text” 属性 =" 属 性 值 " 上 > 
下 面 是 一 个 使 用 文本 域 的 实例 。 其 代码 如 下 所 示 。 


be input-text.html 


01 <body> 
02 ”<h3> 个 人 信息 </h3> 
03 <form action="edit.asp"> 
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姓名 : 
<input type="text" size="30" name="1" /><br > 
性 别 : 

04 < type="text" size="30" name="2" /><br > 
民族 : 

05 <input type="text" size="30" name="3" /><br /> 
年 龄 : 

06 <inputtype="text" size="30" name="4" /><br/> 

籍贯: 

<input type="text" size="30" name="5" /><br /> 

<input type="submit" value=" 提 交 " > 

</form> 

</body> 


其 运行 后 的 显示 效果 如 图 9-6 所 示 。 


588%3 


9-6 文本 域 的 显示 效果 


9.2.2 ”密码 区 域 password 


密码 区 域 中 <input> 元 素 的 type 属性 值 为 password， 其 主要 作用 是 用 来 提供 输入 密码 、 口 


令 等 内 容 的 区 域 。 该 区 域 中 输入 的 内 容 将 以 实心 圆 点 的 形式 显示 。 语 法 结构 如 下 所 示 。 
<input type=" password" 属性 =" 属 性 值 " > 
下 面 是 一 个 使 用 密码 区 域 的 实例 。 其 代码 如 下 所 示 。 


Wa input-password.html 


01 
下 面 是 几 种 不 同 效果 的 密码 域 : 
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02 <form name="example" action="deal.asp" method="post"> 

<!-- 添 加 一 个 长 度 为 22 的 密码 域 -> 

登录 密码 : <input type="password" name="usemame" size=22><br> 

<!- 添 加 一 个 长 度 为 22， 但 是 最 多 可 以 输入 30 个 字符 的 密码 域 -> 

支付 密码 : <input type="password" name="age" size=22 maxlength=30><br> 

<!-- 添 加 一 个 长 度 为 22、 最 多 可 输入 30 个 字符 ， 默 认 密码 设置 为 12345 的 密码 域 -> 

原始 密码 : <input type="password" name="privateweb" size=22 maxlength=30 value="12345"> 
03 </form> 
04 </body> 


其 运行 后 ， 添 加 账号 和 密码 时 的 显示 效果 ， 如 图 9-7 所 示 。 在 页 面 中 输入 任意 字符 后 的 显 
示 效 果 如 图 9-8 所 示 。 


恒 在 表单 中 添加 密码 域 - mi crosoft Intersete E91 口 | x| 
文件 下， 编辑 查看 WD 收 豪 和 ) 工具 中 帮助 | 屠 


(CL MDNREOND SL dd 
地 址 ) [名 ] 0 wy DocumentsWevUntitled-s htnl 可 园 转 到 | 话 接 » 
下 面 是 几 种 不 同 效果 的 密码 域 ， 习 


登录 密码 ， 
支付 密码 ， 
原始 密码 ，|eeeee 


避 在 表单 中 添加 密码 域 - WicresoEt IateERRU ERRLEREES [| 上 1 
文件 四 编辑 下 查看 中。 收 送 和) 工具 CI) | 帮助 00) | 


母 鲁 - 轩 -四 四 本 | 万 哇 认 sw 国 “ 
琅 址 加 | 司 ] 0: wy necmentsvos\intitled-e htnl 本 | 国 科 到 | 放 搞 > 
习 


下 面 是 几 种 不 同 效果 的 密码 域 ， 


登录 密码 ,eose 
支付 密码 三” 
原始 密码 ,seeee 


Ti ompater mp 


图 9-7 密码 区 域 的 显示 效果 图 9-8 在 密码 域 输入 文字 


9.2.3 ”提交 按钮 submit 


提交 按钮 中 <input> 元 素 的 type 属性 值 为 submit， 用 来 发 送 表单 中 的 内 容 。 只 有 单 击 “ 提 
交 ” 按 钮 ， 表 单 中 的 信息 才能 够 发 送 给 相应 的 程序 。 语 法 结构 如 下 所 示 。 


<input type=" submit” 属性 =" 属 性 值 " 请 
下 面 是 一 个 使 用 提交 按钮 的 实例 。 其 代码 如 下 所 示 。 


input-submit.html 
01 <body> 

02 ”<h3> 网 银 支 付 <h3> 

03 <form action="edit.asp"> 
用 户 账号 : <input type="text" size="20" name="namel" /> <br /> 
登录 密码 : <input type="password'" name="usemamen size=30><br> 
支付 密码 : <input type="password" name="age" size=30 ><br> 

04 ”<input type="submit' name="name3" value" 确 认 提 交 " /> 
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05 </form> 
06 </body> 


其 运行 后 的 显示 效果 ， 如 图 9-9 所 示 。 


9-9 ”提交 按钮 的 显示 效果 


9.2.4 ”复位 按钮 reset 


复位 按钮 中 <input> 元 素 的 type 属性 值 为 reset， 其 主要 作用 是 ， 当 用 户 想 重新 填写 内 容 时 ， 
可 以 使 用 复位 按钮 ， 使 表单 恢复 到 初始 状态 。 语 法 结构 如 下 所 示 。 


<input type=" reset” 属性 =" 属 性 值 " /> 
下 面 是 一 个 使 用 复位 按钮 的 实例 。 其 代码 如 下 所 示 。 
| 例 程 9-8| input-reset.html 


01 <body> 

02 ”<h3> 网 银 支付 </h3> 

03 <form action="edit.asp"> 
用 户 账号 :<input type="text" size="20" name="name1l" /><br /> 
登录 密码 : <input type="password" name="usemame" size=30><br> 
支付 密码 ;<input type="password" name="age" size=30 ><br> 

04 <input type="submit" name="name3" value=" 确 认 提交 " /> 

05 ”<input type="reset" name="name4" value=" 复 位 " /> 

06 </form> 

07 </body> 


其 运行 后 的 显示 效果 ， 如 图 9-10 所 示 。 
从 图 9-10 可 以 看 出 , 复位 按钮 和 提交 按钮 在 显示 效果 上 并 没有 区 别 。 所 以 要 注意 value 属 
性 中 文本 要 正确 对 应 。 
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图 9-10 复位 按钮 的 显示 效果 


9.2.5 图像 按 钮 image 


图 像 按钮 中 <input> 元 素 的 type 属性 值 为 image, 用 来 发 送 表单 中 的 内 容 。 其 作用 和 提交 按 
钮 的 作用 相同 。 语 法 结构 如 下 所 示 。 


<input type=" image" 属性 =" 属 性 值 " > 


Pm 
~ 在 图 像 按钮 中 ,可 以 使 用 图 像 元 素 中 的 sre 属性 定义 图 像 的 路 径 .用 width 和 height 
属性 定义 图 片 的 大 小 (建议 使 用 级 联 样式 表 控制 图 片 的 表现 ). 


下 面 是 一 个 使 用 图 像 按钮 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 9-9| input-image.html 
01 <body> 
02 ”<h3> 网 银 支付 <h3> 
03 ”<fom action="edit.asp"> 
用 户 账号 ，<input type="text" size="20" name= "mamel" /><br /> 
登录 密码 : <input type="password" name="username" size=30><br> 
支付 密码 : <input type="password" name="age" size=30 ><br> 
04 <input type="image" sre="http://www.baidu.com/img/logo.gif" width="90" height="40" name="name3" 
value=" 提 交 " /> 
05 ”<input type="reset" name="name4" value=" 复 位 " /> 
06 </form> 
07 </body> 


其 运行 后 的 显示 效果 ， 如 图 9-11 所 示 。 
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9.2.6 ” 单 击 按 钮 button 


单 击 按钮 中 <input> 元 素 的 type 属性 值 为 button, 用 来 激活 相应 的 行为 ,或 者 为 脚本 和 程序 
提供 相应 的 值 。 语 法 结构 如 下 所 示 。 


<input type=" button" 属性 =" 属 性 值 " 户 
下 面 是 一 个 使 用 单 击 按钮 的 实例 。 其 代码 如 下 所 示 。 


Wb input-button.html 


01 <body> 

02 ”<h3> 账 号 注册 </h3> 
用 户 名 

03 ”<input type="text" size="25" name="name1" /> 

04 <input type="button" name="check" value=" 验 证 用 户 名 是 否 可 用 " /><br /> 
登录 密码 <input type="password" name="usemame" size=30><br> 
确认 密码 <input type="password" name="age" size=30 ><br> 

05 ”<input type="submit" name="name2" value=" 提 交 " /> 

06 “<input type="reset" name="name3" value=" 复 位 " /> 

07 </form> 

08 </body> 


其 运行 后 的 显示 效果 如 图 9-12 所 示 。 


9.2.7 ” 复 选 框 checkbox 


复 选 框 中 <input> 元 素 的 type 属性 值 为 checkbox, 用 来 
提供 用 户 多 项 选择 的 功能 。 语 法 结构 如 下 所 示 。 


<input type=" checkbox" 属性 -" 属 性 值 " > 
下 面 是 一 个 使 用 复 选 杠 的 实例 。 其 代码 如 下 所 示 。 图 9 1 间接 组 的 显示 效果 
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input-checkbox.html 

01 <body> 

02 ”<h3> 复 选 框 checkbox</h3> 

03 <form action="edit.asp"> 
选择 你 喜欢 的 书 ! <br /> 
<input type="checkbox" checked="checked" name="chack" value="1" > 武侠 小 说 <br /> 
<input type="checkbox" name="chack" value="2" /> 玄幻 小 说 <br 放 
<input type="checkbox" name="chack" value="3" /> 历史 故事 <br /> 
<input type="checkbox" name="chack" value="4" /> 名 人 传记 <br 上 > 
<input type="checkbox" name="chack" value="5" /> 漫画 <br /> 
<input type="checkbox" name="chack" value="6" /> 杂志 <br /><br > 
<input type="submit" name="name3" value" 提 交 " /> 
<input type="reset" name="name4" value=" 复 位 " /> 

04 </form> 

05 </body> 


其 运行 后 的 显示 效果 如 图 9-13 所 示 。 


对 无 标题 文档 - Wicrosoft Interaet Explorer 口 | x| 
| 文件 四 铺 竹 四 查看 ID) 收藏 Q) | 工具 加 帮助 中 ) 区 3 
i ” Om AW wm BID 
9.2.8” 单 选 按钮 radio ET Om 
习 
单 选 按钮 中 <input> 元 素 的 type 属性 值 为 “| ee 
mpuP> 70 六 选择 你 喜欢 的 书 ! 


radio， 用 来 提供 用 户 单项 选择 的 功能 。 语 法 结 。 | 史 芝 估 人 这 


构 如 下 所 示 。 大志 
所 漫画 
<input type="radio" 属性 =" 属 性 值 " /> 
提交 | 复位 


用 户 只 能 够 选择 一 个 按钮 ， 如 果 点 选 其 他 
按钮 ， 则 原来 选择 会 自动 取消 。 下 面 是 一 个 使 
用 单 选 按钮 的 实例 。 其 代码 如 下 所 示 。 


input-radio.html 
01 <body> 
02 ”<h2> 心 理 小 测试 : 拿 钥匙 的 方式 <h2> 
03 ”<hr 
下 班 回 家 ,家 门 的 钥匙 怎么 处 理 ,可 以 反映 出 你 的 性 格 的 中 心 部 分 呢 。 试 试看 吧 : 
04 <h> 
05 <form name="example" action="deal.asp" method="post"> 
06 -<input type="radio" name="test" value="answerA" checked> 下 班 前 就 把 钥匙 放 在 口袋 里 <br> 
07 ”<input type="radio" name="test" value="answerB" > 快 到 家 门口 的 时 候 找 钥 匙 <br> 
08 ”<input type="radio" name="test" value="answerC" > 到 了 门口 再 找 钥匙 <br> 
09 ”<input type="radio" name="test" value="answerD" > 从 来 不 想 这 个 问题 <br> 
10 ”<input type="submit" name="name3" value" 提 交 " /> 
11 <input type="reset" name="name4" value=" 复 位 " /> 
12 </form> 
13 </body> 


其 运行 后 的 显示 效果 如 图 9-14 所 示 。 


RE 


BE CT mpeter 


图 9-13 复 选 框 的 显示 效果 
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心理 小 测试; 拿 钥匙 的 方式 


下 班 回 家 ,家门 的 钥匙 怎么 处 理 ,可 以 反映 出 你 的 性 格 的 中 心 部 分 
呢 。 试 试看 吧 ， 


人 下班 前 就 把 钥匙 放 在 口 开 里 
人 快 到 家 门口 的 时 候 找 钥匙 
C 到 了 门口 再 找 钥 匙 

人 从 来 不 想 这 个 问题 
ET 


图 9-14 单 选 按钮 的 显示 效果 


9.2.9 隐藏 区 域 hidden 


隐藏 区 域 中 <input> 元 素 的 type 属性 值 为 hidden， 使 表单 的 内 容 不 出 现在 页 面 之 中 ， 但 是 
依然 可 以 传递 参数 。 语 法 结构 如 下 所 示 。 


<input type="hidden" 属性 =" 属 性 值 " /> 
下 面 是 一 个 使 用 隐藏 区 域 的 实例 。 其 代码 如 下 所 示 。 


input-hidden.html 


01 


<body> 

下 面 是 几 种 不 同属 性 的 文字 字段 : 

02 <form name="example" action="deal.asp" method="post"> 
姓名 : <input type="text" name="usemame" size=35> 

<br> 

年 龄 ，<input type="text" name="age" size=35 maxlength=2> 
<br 


个 人 主页 : <input type="text" name="privateweb" size=15 maxlength=30 value="http://"> 
<!-- 添 加 隐藏 内 容 --> 
<input type="hidden" name='"page id" value="example "> 
<br> 
03 ”<input type="submit" name="name3" value" 提 交 " /> 
04 ”<input type="reset" name="name4" value=" 复 位 " /> 


用 注意 
3 隐藏 区 域 是 不 占有 空 


C0 


间 的 。 


其 运行 后 的 显示 效果 如 图 9-15 所 示 。 
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图 9-15 隐藏 区 域 的 显示 效 


@.3 | <input> 元 素 的 属性 


在 9.2 节 中 ， 主 要 讲解 了 <input> 元 素 的 type 属性 。 接 下 来 讲解 下 <input> 元 素 中 其 他 部 分 
属性 。 


9.3.1 只 读 属性 readonly 


只 读 属性 readonly 用 来 指定 <input> 元 素 中 的 内 容 为 只 读 。 使 用 readonly 属性 后 , 用户 将 不 
能 更 改 表单 中 的 相应 内 容 。 但 是 表单 中 的 内 容 仍然 可 以 传递 。 语 法 结构 如 下 所 示 。 


<input readonly="readonly" 属性 =" 属 性 值 " > 
下 面 是 一 个 使 用 只 读 属 性 的 实例 。 其 代码 如 下 所 示 。 
| 例 程 9-14| input-readonly.html 


<body> 
02 ”<h3> 一 个 表单 的 示例 <h3> 
03 <form action="edit.asp"> 
您 获得 的 用 户 名 : 
04 ”<input type="text" size="19" name="name1" value="abcde" readonly="readonly" /><br /> 
请 添加 您 的 密码 : 
05 <input type="password" size="20" name="name2" 广 <br 广 <br 广 
06 ”<input type="submit" name="name3" value" 提 交 " /> 
07 ”<input type="reset" name="name4" value-" 复 位 " /> 
08 </form> 
09 


<Jbody> 
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其 运行 后 的 显示 效果 如 图 9-16 所 示 。 


9.3.2 不 可 用 属性 disabled 


不 可 用 属性 disabled 用 来 指定 <input> 元 素 中 的 
内 容 为 不 可 用 。 使 用 disabled 属性 后 ， 用 户 将 不 能 
更 改 表单 中 的 相应 内 容 。 同 时 表单 中 的 内 容 将 不 能 
被 传递 。 语 法 结构 如 下 所 示 。 


<input disabled =" disabled" 属性 =" 属 性 值 " > 


下 面 是 一 个 使 用 不 可 用 属性 的 实例 。 其 代码 如 
下 所 示 。 


| 例 程 9-15| input-disabled.html 


01 <body> 

02 ”<h3> 不 可 用 属性 <h3> 

03 <form action="edit.asp"> 
您 的 通行 证 : 

04 <input type="text" size="20" value="abcde" disabled="disabled" /><br /> 
输入 您 的 密码 : 

05 <input type="password" size="22" /><br /><br > 

06 <input type="submit" name="name3" value=" 提 交 " disabled="disabled" /> 

07 ”<input type="reset" name="name4" value=" 复 位 " /> 

08 </form> 

09 </body> 


其 运行 后 的 显示 效果 如 图 9-17 所 示 。 


输入 您 的 用 户 和 名: |sucesst11 
请 输入 您 的 密码 : 


图 9-16 使 用 readonly 属性 的 显示 效果 


图 9-17 使 用 disabled 属性 的 显示 效果 
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9.4 | 选择 列表 条 目 元 素 <option> 


选择 列表 条 目 元 素 <option> 用 来 定义 下 拉 列 表 中 的 项 目 。 语 法 结构 如 下 所 示 。 
<select 属性 =-" 属 性 值 > 

<option 属性 -" 属 性 值 ,> 选择 列表 内 容 <option> 
</select> 


i 


Es 
| 
| 


六 注意 
了 <option> 元 素 必 须要 在 <selecf> 元 素 中 使 用 。 


下 面 是 一 个 使 用 <option> 元 素 的 实例 。 其 代码 如 下 所 示 。 
inputdisabled html 


01 <body> 
这 里 是 126 邮箱 的 注册 页 面 : 

02 <form action="mailto:abcd(@163.com" name="research" method="post"> 
03 ”<p> 用 户 名 : 

<input name="username" type="text" size=20> 
04 <p> 
05” <p> 登录 密码 : 

<input name="password" type="password" size=20> 
06 <p> 
07 <p> 

重复 密码 : 

<input name="password2" type="password" size=20> 
08 <p> 为 了 找 回 密码 ， 需 要 你 输入 下 面 证 件 类 型 ; 
09 ”<select name="cardtype"> 

<option value="id_card" selected> 身 份 证 

<option value="stu_card"> 学 生 证 

<option value="drive_card"> 驾 驶 证 

<option value="other_card"> 其 他 证 件 
09 </select> 
10 <p> 
11 <p> 证 件 号 码 : 

<input name="cardmum" type="text" size=20 maxlength=35> 
12 <p> 
13” ”<p> 联系 方式 : 

<input name="touch" type="text" size=20 maxlength=50> 
14 <p> 
15” <p> 关心 的 栏目 : 
16 <selectname="content" size=5 multiple> 

<option value="M1" selected> 体 育 栏目 

<option value="M2"> 科 技 内 容 
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<option value="M6"> 娱 乐 八卦 
<option value="M7"> 金 融 投资 
<option value="M8"> 旅 游 交 友 

17</select> 

18 <p> 
&nbsp;&nbsp;énbsp:; &nbsp:&nbsp: &nbsp; &nbsp:&nbsp; 
<input type="reset" name"reset" value=" 重 置 "> 

19 <p> 

20 </form> 

21 </body> 


其 运行 后 的 显示 效果 如 图 9-18 所 示 。 


> 这 里 是 126 邮 箱 的 注册 页 面 ， 

用 户 名 ， 

登录 密码 ， 

重复 密码 ， 

为 了 找 回 密码 ， 需 要 你 输入 下 面 证 件 类 型 ， | 身份 证 “至 
Er 

证 件 号 码 ， 


图 9-18 a 


9.5 按钮 元 素 <button> 


按钮 元 素 <button> 用 来 定义 一 个 按钮 。 在 <button> 元 素 中 ， 不 但 可 以 使 用 文本 内 容 ， 也 可 
以 使 用 图 片 等 其 他 元 素 。 语 法 结构 如 下 所 示 。 

<button> 按 钮 内 容 </button> 

下 面 是 一 个 使 用 <button> 元 素 的 实例 。 其 代码 如 下 所 示 。 
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01 
02 ”<h3> 对 本 页 面 的 留言 <h3> 
03 <form action="edit.asp"> 
用 户 名 : <input type="text" size="20" name="namel" /><br /> 
用 户 留言 : <textarea cols="40" rows="10" name="name2"></textarea><br /><br /> 
04 <button name="name3" type="submit"> 按 扭 </button> 
05 </form> 


06 </body> 
其 运行 后 的 显示 效果 如 图 9-19 所 示 。 


> 


MD Ew eae te | 因 | 


9-19 使 用 <button> 元 素 的 显示 效果 


上 面 用 到 了 按钮 元 素 <button> 的 类 型 属性 type 来 定义 按钮 元 素 的 类 型 。 


@.6 | 选择 列表 元 素 <select> 


选择 列表 元 素 <select> 用 来 在 页 面 中 定义 一 个 可 以 选择 的 下 拉 列 表 。 语 法 结构 如 下 所 示 。 


<select 属性 =" 属 性 值 > 
<option 属性 =" 属 性 值 :> 选择 列表 内 容 </option> 
</select> 


下 面 是 一 个 使 用 <select> 元 素 的 实例 。 其 代码 如 下 所 示 。 


199 


Select html 


<body> 
02 ”<h3> 注 册 论 坛 会 员 </h3> 
03 <form action="edit.asp"> 
您 的 账号 : <input type="text" size="30"” 户 <br 广 
输入 密码 : <input type="password" size="31" 广 <br 广 <br 亡 
04 ”<p> 为 了 找 回 密码 ， 需 要 你 输入 下 面 证 件 类 型 : 
05 <select name=" "> 
<option value="id_card" selected> 身 份 证 
<option value="stu_card"> 学 生 证 
<option value="drive_card"> 驾 驶 证 
<option value="other card"> 其 他 证 件 
</select> 


ERE 


<p> 

证 件 号 码 : <input type="text" size="30"” 入 <br 广 
<input type="submit" name="name3" value=" 提 交 " /> 
<input type="reset" name="name4" value=" 复 位 " /> 
08 </form> 

09 </body> 


其 运行 后 的 显示 效果 如 图 9-20 所 示 。 


A 
WD |€E]D: Wy Docments\0o\ ntitle 


注册 论坛 会 员 

您 的 账号 ， 

输入 密码 ， 

为 了 找 回 密码 ， 需 要 你 输入 下 面 证 件 类 型 ， 


为 了 技 回 密码 ， 需 要 你 答 入 下 面 证 件 类 型 ， 
[5 | 


证 人 SB 友 [rr 
图 虹 


9-20 ”使 用 <select> 元 素 的 显示 效果 9-21 展开 列表 后 的 显示 效果 


9.6.1 高 度 属性 size 


高 度 属性 size 用 来 定义 <select> 元 素 中 显示 下 拉 列 表 区 域 的 高 度 。 在 本 章 前 面 例 程 3-20 讲 


解 的 列表 元 素 中 ，size 属性 一 直 用 来 定义 显示 区 域 的 宽度 ， 所 以 要 特别 注意 其 使 用 环境 ， 防 止 
混淆 。 语 法 结构 如 下 所 示 。 


<select size=" 数 字 值 > 
<option 属性 =" 属 性 值 > 选 择 列表 内 容 </option> 


</select> 


表单 元 素 


数字 值 代表 的 含义 是 : 文本 行 的 数目 。 下 面 是 一 个 使 用 size 属性 的 实例 。 其 代码 如 下 所 示 。 
selectsize html 


01 <body> 
02 ”<h3> 注 册 论 坛 会 员 <h3> 
03 <formaction="edit.asp"> 
您 的 账号 : <input type="text" size="30"” 广 <br 广 
输入 密码 : <input type="password" size="31" 广 <br 上 ><br 广 
04 ”<p> 为 了 找 回 密码 ， 需 要 你 输入 下 面 证 件 类 型 : 
05 <selectname="namel" size="5"> 
<option value="id_card" selected> 身 份 证 
<option value="stu_card"> 学 生 证 
<option value="drive card"> 驾 驶 证 
<option value="other card"> 其 他 证 件 
06 </select> 
07 </p> 
证 件 号 码 : <input type="text" size="30" /><br/> 
<input type="submit" name= "name3" value=" 提 交 " /> 
<input type="reset" name="name4" value=" 复 位 " /> 
08 </form> 
09 </body> 


其 运行 后 的 显示 效果 如 图 9-22 所 示 。 


9.6.2 ”多 项 选择 属性 multiple 到 ee me 他 
忠 奸 WW) [了 wy hecmsatsv0sWVatitlea-21 “a le 
列表 项 的 设置 方法 与 下 拉 菜 单 类 似 ， 不 同 的 注册 论坛 会 员 
是 列表 项 在 页 面 中 可 以 显示 出 几 条 信息 ， 一 旦 超 您 的 账号 
出 这 个 信息 数量 ， 在 列表 右 侧 会 出 现 滚动 条 ， 拖 。 | “* 
动 滚动 条 能 看 到 所 有 的 选项 。 语 法 结构 如 下 ; En RT 
<selectname=" 列 表 项 名 称 " size=" 显 示 的 列表 Ei 
项 数 " multiple> 
Es <option value=" 选 项 值 " selected> 选 项 显 WT 
<option value=" 选 项 值 "> 选项 显示 内 容 EE 夺 后 区 后 隔 阿 了 ER 党 


</select> 图 9-22 使 用 size 属性 的 显示 效果 
这 个 属性 的 使 用 请 参考 实例 9-16， 这 里 不 再 做 实例 演示 。 
” 户 说 明 


| 在 该 语法 中 ，size 设 定 页 面 中 的 最 多 列表 项 数 ， 当 超过 这 个 值 时 会 出 现 滚动 条 。 


multiple 表示 这 一 列表 可 以 进行 多 项 选择 。 选 项 值 是 提交 表单 时 的 值 ， 而 选项 显示 内 
容 才 是 真正 在 页 面 中 显示 的 选项 。 
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跟 我 学 HTML+CSS 


9. € 文本 区 域 元 素 <textarea> 


除了 前 面 讲解 的 两 大 类 控件 外 ， 还 有 一 种 特殊 定义 的 文本 样式 ， 称 为 文字 域 或 文本 域 。 它 
与 文字 字段 的 区 别 在 于 可 以 添加 多 行 的 文字 ， 从 而 可 以 输入 更 多 的 文本 。 这 类 控件 在 一 些 留言 
板 中 最 为 常见 。 
语法 结构 如 下 : 
<textarea name=" 文 本 域名 称 " value=" 文 本 域 默认 值 " rows= 行 数 cols= 列 数 > 
</textarea> 


| 


也 说 明 
在 该 语法 中 ，rows 是 指 文本 域 的 行 数 ， 也 就 是 高 度 值 ， 当 文本 内 容 超出 这 一 范围 
会 出 现 滚动 条 ; cols 设置 文本 域 的 列 数 ， 也 就 是 其 宽度 。 


9.7.1 宽度 属性 cols 
宽度 属性 cols 用 来 定义 文本 区 域 的 宽度 。 语 法 结构 如 下 所 示 。 


<textarea cols=" 数 字 值 "> 元 素 内容 </textarea> 
其 中 数字 值 的 含义 是 字符 数目 。 下 面 是 一 个 使 用 cols 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb textarea-cols.html 


01 <body> 
02 ”<h3> 文 本 区 域 元 素 </h3> 
03 <form action="edit.asp"> 
用 户 名 : <input type="text" size="30" name="namel" /><br /> 
留言 : <textarea cols="35" rows="10" name="name2"></textarea><br /> 
<input name="name3" type="submit' value=" 提 交 " /> 
<input name="name4" type="reset" value=" 重 置 " /> 


04 </form> 

05 </body> 

其 运行 后 , 在 文本 区 域 中 输入 文本 时 的 显示 效果 如 图 | 
9-23 所 示 。 OL 


9.7.2 ”高 度 属性 rows 


高 度 属性 rows 用 来 定义 文本 区 域 的 高 度 。 语 法 结构 
如 下 所 示 。 


<textarea TIows=" 数 字 值 "> 元 素 内 容 </textarea> 


三 [全 was 


图 9-23 使 用 cols 属性 的 显示 效果 
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表单 元 素 


其 中 数字 值 的 含义 是 行 的 数目 。 下 面 是 一 个 使 用 rows 属性 的 实例 。 其 代码 如 下 所 示 。 


ba textarea-rows html 


01 <body> 
02 ”<h3> 一 个 表单 的 示例 <h3> 
03 <formaction="edit.asp"> 
言 : <textarea cols="40" rows="10" name="name2"></textarea> 
04 </form> 
05 </body> 


其 运行 后 ， 在 文本 区 域 中 输入 文本 时 的 显示 效果 如 图 9-24 所 示 。 


从 图 9-24 中 可 以 看 出 rows 属性 取 值 的 含义 ， 此 时 取 值 为 10， 所 以 刚好 可 以 显示 10 行 。 
含有 更 多 的 内 容 时 将 显示 滚动 条 ， 如 图 9-25 所 示 。 


本 无 标题 文 泊 -Micrexeft Interaet ER 
4 0 文件 四 编辑 到) EO ee | _ | 
ET i 中 | 了 Wh [3 ENSE 国名 | 站 扫 rm ” 
Orn :© | Du Hw OD ” | Dw neemet\oo noo-s na 国有 | 人 
二 村 加 En nr Docwents WOOinti tet EE 
[nr Docwnents\09\ nti tled-25. htnl 悦目 文本 区 域 元 素 司 
文本 区 域 元 素 
用 户 包 ， 
lc 
p 
|E 
E 
le 
日 
9 
留言 ,名 习 
本 | 到 | 
加 
[mmm ml mE 2 SE [ll 
图 9-24 使 用 rows 属性 的 显示 效果 图 9-25 内容 超出 高 度 的 显示 效果 


9.8 | 表单 标记 元 素 <label> 


表单 标记 元 素 <labe 记 用 来 定义 一 个 关联 的 标记 ,将 信息 附属 在 表单 控件 上 。 例如， 定义 关 
联 表单 的 文本 ， 当 单 击 文本 时 ,实现 表单 的 选择 。 或 者 定义 表单 的 热 键 等 。 语 法 结构 如 下 所 示 。 


<label> 元 素 内 容 </label> 
其 中 部 分 属性 的 含义 和 用 法 如 下 所 示 。 


9.8.1 定义 目标 属性 for 


定义 目标 属性 for 用 来 关联 文档 中 相应 的 表单 。 使 用 for 属性 时 ， 目 标 表单 要 有 唯一 的 id 
标识 。 所 以 通过 for 属性 可 以 将 <label> 元 素 与 唯一 一 个 表单 关联 ， 但 是 一 个 表单 却 可 以 关联 几 
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跟 我 学 HTML+CSS 


个 <label> 元 素 。 语 法 结构 如 下 所 示 。 


<label for=" 目 标 表单 的 id"> 元 素 内 容 </label> 


下 面 是 一 个 使 用 for 属性 的 实例 。 其 代码 如 下 所 示 。 


We yd label-for.html 


01 <body> 
02 ”<h3> 定 义 目 标 属性 </h3> 


03 <formid="forml" name="form!1" method="post" action=""> 


选择 你 喜欢 的 动物 <br 亡 


<input type="checkbox" name="check" value="1" id="check1" /> 


<label for="check1"> 老 虎 </label><br /> 


<input type="checkbox" name="check" value="2" id="check2" /> 


<label for="check2"> 狮 子 </label><br /> 


<input type="checkbox" name="check" value="3" id="check3" /> 


<label for="check3"> 鹦 政 </label><br /> 
<input type="checkbox' 
<label for="check4"> 狗 </label><br /> 


" name="check" value="4" id="check4" /> 


<input type="checkbox" name="check" value="5" id="check5" /> 


<label for="check5"> 猫 </label><br /><br 户 


<input type="submit" name="name" value=" 提 交 " /> 


04 </form> 
05 </body> 


其 运行 后 的 显示 效果 如 图 9-26 所 示 。 

从 图 9-26 中 可 以 看 出 ，for 属性 对 <label> 元 
素 的 显示 效果 并 没有 影响 。 但 是 由 于 使 用 for 属 
性 实现 了 表单 和 <label> 元 素 的 关联 ， 所 以 当 单 击 
文本 内 容 时 ， 相 应 的 复 选 框 就 会 被 选中 。 


9.8.2 ”定义 热 键 属性 accesskey 


定义 热 键 属性 accesskey 用 来 定义 激活 关联 
表单 的 热 键 。 定 义 热 键 之 后 ， 只 需 使 用 键盘 上 的 
Alt 键 加 热 键 就 可 以 选择 相应 的 表单 。 语 法 结构 如 
下 所 示 。 


<label for=" 目 标 表单 的 jd" accesskey=" 键 的 名 称 "> 元 
素 内 容 </label> 


ID 

ET 

Oa: OND Wm 加 | 

| 号 三 公公 ] :wy beewwentsvogvatitlet-zr hl 本 | 加 条 到 | 旺 玫 > 
加 

定义 目标 属性 

选择 你 喜欢 的 动物 

F 老 


Sy copater 


图 9-26 使 用 for 属性 的 显示 效果 


下 面 是 一 个 使 用 accesskey 属性 的 实例 。 其 代码 如 下 所 示 。 


Ws label-accesskey.html 


01 <body> 
02 ”<h3> 定 义 热 键 属性 </h3> 


03 <formid="forml" name="forml" method="post" action=""> 
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一 


选择 你 喜欢 的 动物 <br /> 
<input type="checkbox" name="check" value="1" id="check1" /> 
<label for="check1" accesskey="z"> 老 虎 </label><br > 
<input type="checkbox" name="check" value="2" id="check2" /> 
<label for="check2" accesskey="b"> 狮 子 </label><br /> 
<input type="checkbox" name="check" value="3" id="check3" /> 
<label for="check3" accesskey="e"> 狼 </label><br 亡 
<input type="checkbox" name="check" value="4" id="check4" /> 
<label for="check4" accesskey="d"> 狗 <Jlabel><br /> 
<input type="checkbox" name="check" value="5" id="check5" /> 
<label for="check5" accesskey="e"> 猫 </label><br /><br /> 
<input type="submit" name="name" value=" 提 交 " /> 

04 </form> 

05 </body> 


其 运行 后 ， 同 时 按 下 Alt 键 和 A 键 时 的 显示 效果 如 图 9-27 所 示 。 


着 


9-27 ”使 用 accesskey 属性 的 显示 效果 


使 用 热 键 激活 表单 的 方法 ， 在 中 文 页 面 中 会 存在 局 限 。 因 为 没有 方便 的 方法 ， 能 够 指示 出 
表单 使 用 的 热 键 。 所 以 用 户 将 很 难 操作 。 


9.9| 本 章 习题 


“和 选择 题 

1. 如 果 要 在 表单 里 创建 一 个 普通 文本 框 ， 以 下 写法 中 正确 的 是 ( 。 )。 
A.<Input> 

B. < Input type="password"> 

C. < Input type="checkbox"> 

D. < Input type="radio"> 


跟 我 学 HTML+CSS 


以 下 有 关 表 单 的 说 明 中 ， 错 误 的 是 ( )。 
. 表单 通常 用 于 搜集 用 户 信息 。 
. 在 form 标记 符 中 使 用 action 属性 指定 表单 处 理 程序 的 位 置 。 
. 表单 中 只 能 包含 表单 控件 ， 而 不 能 包含 其 他 诸如 图 片 之 类 的 内 容 。 
. 在 form 标记 符 中 使 用 method 属性 指定 提交 表单 数据 的 方法 。 
在 指定 单 选 框 时 ， 只 有 将 以 下 属性 的 值 指定 为 相同 ， 才 能 使 它们 成 为 一 组 。 
type B.name C.value D.checked 
创建 选项 菜单 应 使 用 以 下 标记 符 (。 )。 
select 和 option 
Input 和 label 
Input 
. Input 和 option 
以 下 有 关 按 钮 的 说 法 中 ， 错 误 的 是 ( )。 
. 可 以 用 图 像 作为 提交 按钮 。 
可 以 用 图 像 作为 重 置 按钮 。 
可 以 控制 提交 按钮 上 的 显示 文字 。 
. 可 以 控制 重 置 按钮 上 的 显示 文字 。 
若 要 产生 一 个 4 行 30 列 的 多 行文 本 域 ， 以 下 方法 中 ， 正 确 的 是 (。 )。 
<Input type="text" Rows="4" Cols="30" Name="txtintrol"> 
<TextArea Rows="4" Cols="30" Name="txtintro"> 
.<TextArea Rows="4" Cols="30" Name="txtintro"></TextArea> 
.<TextArea Rows="30" Cols="4" Name=" txtintro"></TextArea> 
.以 下 表单 控件 中 ， 不 是 由 INPUT 标记 符 创 建 的 为 ( 。 )。 
单 选 框 
. 口令 框 
. 选项 菜单 
. 提交 按钮 
8. 要 给 表单 控件 设置 标签 ， 以 下 代码 中 正确 的 是 ( 。 )。 
A. <INPUT type="checkbox" name="news"><LABEL for="news"> 新 闻 </LABEL> 
B. <INPUT type="checkbox" for="news"><LABEL id="news"> 新 闻 </LABEL> 
C. <INPUT type="checkbox" for="news"><LABEL name-"news"> 新 闻 </LABEL> 
D. <INPUT type="checkbox" id="news"><LABEL for="news"> 新 闻 </LABEL> 


了 | 
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二 、 填 空 题 

1. 表单 对 象 的 名 称 由 属性 设 定 ; 提交 方法 由 属性 指定 ， 若 要 提交 大 
数据 量 的 数据 ， 则 应 采用 方法 ; 表单 提交 后 的 数据 处 理 程序 由 属性 指定 。 

2. 表单 是 Web 和 Web 之 间 实 现 信息 交流 和 传递 的 桥梁 。 
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3. 表单 实际 上 包含 两 个 重要 组 成 部 分 : 一 是 描述 表单 信息 的 ， 二 是 用 于 处 理 表 
单数 据 的 服务 器 端 。 
4. 表单 使 可 以 与 进行 交互 ， 是 收集 客户 信息 和 进行 网 络 调查 的 主要 


途径 。 
三 、 实 战 练习 
1. 已 知 页 面 效 果 如 图 9-28 所 示 ， 请 填写 以 下 HTML 代码 中 留 下 的 空白 。 
情况 登记 


Ee 
密码 : er 

性 别 : [c 男 c 女 
| 


图 9-28 页 面 效果 
<form> 
<table border bgcolor="#eeeeee"> 
<tr><td align=center><b> 情 况 登 记 </b> 
<tr><td> 姓 名 : <td> 
<tr><td> 密 码 : <td><INPUT size="20" value="pwd"> 
<tr><td> 性 别 : <td><INPUT name="sex" type=radio> 男 <INPUT name="sex" type=radio> 女 
<tr><td>&nbsp:<td><INPUT value=" 提 交 "> <INPUT type='"reset"' _ > 
</table> 
</form> 
2. 已 知 页 面 效 果 如 图 9-29 所 示 ( 其 中 的 细 线 效果 为 1 像素 粗细 , 颜色 为 黑色 ), 请 填写 以 下 
HTML 代码 中 留 下 的 空白 。 
个 人 信息 
姓名 : 
密码 ， [mv 
性 别 ， c 田 c 女 


EE a 
9-29 页 面 效果 


<FORM> 
<TABLE cellpadding="5" align="center" bgcolor="#dddddd"> 
<TR> 
<ID colspan="2"><B> 个 人 信息 </B> 
<TR bgcolor="white"> 
<TD> 姓 名 : <TD><INPUT size="20"> 
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<TR bgcolor="white"><TD> 密 码 : <TD><INPUT size="20" value="pwd"> 
TR bgcolor="white"> 
<TD> 性 别 : <TD><INPUT name="sex" type=radio> 男 <INPUT tfype=radio> 女 
<TR><TD>&nbsp:<TD><INPUT value" 提 交 " > <INPUT type="reset" value—" 
重 写 "> 
</TABLE> 
<FORM> 


PAN 
框架 元 夫 


所 谓 框架 就 是 把 页 面 分 为 几 个 部 分 ， 各 个 部 分 之 间 是 相互 独立 的 页 面 ， 却 又 互相 有 关联 。 
用 户 在 浏览 这 种 页 面 的 时 候 ， 当 对 其 中 某 一 个 部 分 进行 操作 ， 如 浏览 、 下 载 的 时 候 ， 其 他 页 面 
会 保持 不 变 ， 这 样 的 页 面 就 被 称 为 框架 结构 的 页 面 ， 也 称 为 多 窗口 页 面 。 

框架 元 素 的 最 主要 功用 是 用 来 “分 割 ” 页 面 窗口 ， 使 每 个 “小 窗口 ”能 显示 不 同 的 HIML 
文件 ， 这 样 的 页 面 结构 就 称 为 框架 结构 的 页 面 ， 而 这 些 “ 小 窗口 ”就 被 称 为 框架 的 “窗口 ”。 
在 HIML 中 ， 框 架 元 素 包 括 <frameset>、<frame>、<iframe> 等 。 


必 、 本章 主要 内 容 有 : 


@ 各 种 框架 元 素 及 其 属性 的 使 用 方法 和 表现 效果 。 
@ 能 够 熟练 分 隔 页 面 窗口 。 

@ ”学 会 框架 的 获 套 。 

@ ”学 会 框架 中 的 复杂 链接 。 


跟 我 学 HTML+CSS 


10. 了 | 框架 集 元 素 <frameset> 


框架 集 元 素 <frameset> 用 来 在 页 面 中 定义 一 个 框架 集合 。 同时 使 用 <frameset> 元 素 也 可 以 控 
制 框架 窗口 之 间 的 距离 ， 窗 口 的 大 小 等 。 语 法 结构 如 下 所 示 。 


从 上 面 的 语法 结构 中 可 以 看 到 ， 在 使 用 框架 的 页 面 中 ，<body> 主 体 标记 被 框架 标记 
<frameset> 所 代替 。 而 对 于 框架 页 面 中 包含 的 每 一 个 框架 ， 都 是 通过 <frame> 标 记 来 定义 的 。 
下 面 是 一 个 使 用 <frameset> 元 素 的 实例 。 其 代码 如 下 所 示 。 


|[ 例 程 10-1| frameset.html 


01 <!IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 

02 "http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

03 <html xmlns="http://www.w3.org/1999/xhtml"> 

04 <head> 

05 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 

06 ”<tite> 框 架 集 元 素 </tite> 

07 </head> 

08 <framesetrows="*,80" cols="*" frameborder="no" border="0" framespacing="0"> 

09 <frameset cols="80,*" frameborder="no" border="0" framespacing="0"> 

10 <frame src="lefthtml" name="leftframe" scrolling="no" noresize="noresize" id="leftframe" 
title="leftframe" /> 

11 <frame sre="main.html" name="mainframe" id="mainframe" title="mainframe" /> 

12 </frameset> 

13 <frame src="bottom html" name="bottomframe" scrolling="no" noresize="noresize" id="bottomframe" 
title="bottomframe" /> 

14 </frameset> 

15 </html> 


该 实例 中 ，08 到 14 行 中 使 用 了 嵌 套 的 <frameset> 元 素 ， 定 义 了 一 个 含有 3 个 独立 区 域 的 
框架 页 面 。 其 运行 后 的 显示 效果 ， 如 图 10-1 所 示 。 
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图 10-1 使 用 <frameset> 元 素 的 显示 效果 


10.1.1 行 属性 rows 


框架 集 元 素 的 行 属性 rows 用 来 指定 框架 集中 行 的 数目 。 在 框架 集中 ， 必 须 使 用 rows 属性 
和 列 属性 cols 其 中 的 一 个 (关于 列 属性 cols 的 内 容 , 将 在 10.1.2 小 节 中 讲解 )。 语 法 结构 如 下 所 示 。 

<framesetrows=" 高 度 值 1, 高 度 值 2,.….*> 其 他 框架 元 素 与 框架 集 </frameset> 

其 中 rows 属性 的 取 值 ， 是 用 英文 “,” 分 隔 的 一 组 数值 (包括 百分比 值 和 通配符 “*”)。 其 
中 每 个 数值 代表 一 个 框架 区 域 的 高 度 。 


Bh 可 能 会 存在 数字 值 高 度 之 和 大 于 或 者 小 于 浏览 器 窗口 的 情况 。 此 时 浏览 器 不 会 自 
动 调整 窗口 大 小 ， 或 者 增 加深 条 来 使 用 框架 ， 而 是 会 按照 每 个 框架 区 域 所 占有 的 高 度 
比例 来 显示 框架 内 容 ， 具 体 的 显示 效果 ， 将 在 实例 中 演示 。 


下 面 是 一 个 使 用 rows 属性 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 10-2| frameset-rows.html 


01 <!DOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 Transitional//EN" 
02 "http://www.w3.o0rg/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 
03 ”<html xmlns="http://www.w3.org/1999/xhtml"> 
04 <head> 
05 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
06 ”<title> 水 平分 割 窗口 的 效果 </title> 
07 </head> 
08 <framesetrows="30%%,70%"> 
<frame> 
<frame> 
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09 </frameset> 
10 <htm> 


该 实例 中 ，08 行 指定 了 页 面 中 2 个 框架 区 域 的 高 度 
分 别 是 30%、70%。 其 代码 运行 后 ,显示 效果 ， 如 图 10-2 
所 示 。 

如 果 将 rows 属性 的 取 值 改 为 总 的 高 度 大 于 100%， 
这 时 框架 页 面 的 显示 高 度 并 不 会 变化 ， 只 是 每 个 框架 区 
域 的 高 度 会 重新 分 配 。 


10.1.2 ” 列 属 性 cols 


框架 集 元 素 的 列 属性 cols 用 来 指定 框架 集中 列 的 数 ”EN 上 用 用 用 有 Eee 
目 。 语 法 结构 如 下 所 示 。 图 10-2 使 用 百分比 值 的 显示 效果 


<frameset cols=" 框 架 窗 口 的 宽度 .框架 窗口 的 宽度 ,……"> 
<frame> 


其 中 cols 属性 的 取 值 ， 是 用 英文 “.” 分 隔 的 一 组 数值 (包括 百分比 值 和 通配符 “*”)。 其 
中 每 个 数值 代表 一 个 框架 区 域 的 宽度 。 


| 及) 注 意 
中 可 能 会 存在 数字 值 的 宽度 之 和 大 于 或 者 小 于 浏览 器 窗口 的 情况 。 此 时 浏览 器 不 会 
自动 调整 窗口 大 小 ， 或 者 增加 滚 条 未 使 用 框架 ， 而 是 会 按照 每 个 框架 区 域 所 占有 的 宽 
度 比 例 来 显示 框架 内 容 ， 具 体 的 显示 效果 ， 将 在 实例 中 演示 。 


下 面 是 一 个 使 用 cols 属性 的 实例 。 其 代码 如 下 所 示 。 


frameset-cols.html 
01 ”<frameset cols="2096.5590.2590"> 
<frame> 
<frame> 
<frame> 
02 </frameset> 
03 </html> 


该 实例 中 ，01 行 指定 了 页 面 中 3 个 框架 区 域 的 宽度 分 别 是 20%、55%、25%。 其 代码 运行 
后 ， 显 示 效果 如 图 10-3 所 示 。 


2 这 


10-3 ”使 用 百分比 值 的 显示 效果 


如 果 将 cols 属性 的 取 值 改 为 总 的 宽度 大 于 100%， 这 时 框架 页 面 的 显示 宽度 并 不 会 变化 ， 
只 是 每 个 框架 区 域 的 宽度 会 重新 分 配 。 大 家 可 以 自己 体会 一 下 。 使 用 数字 值 的 情况 和 使 用 百 分 
比值 的 情况 基本 相同 。 

学 习 了 前 面 的 知识 后 ， 就 可 以 在 一 个 页 面 中 设置 既 有 水 平分 割 的 框架 ， 又 有 垂直 分 割 的 
框架 。 

语法 结构 如 下 : 


<framesetrows=" 框 架 窗口 的 高 度 ,框架 窗口 的 高 度 ……."> 
<frame> 


当然 ， 也 可 以 先进 行 垂 直 分 割 ， 再 进行 水 平分 割 。 其 语法 如 下 : 


<frameset cols=" 框 架 窗 口 的 宽度 ,框架 窗口 的 宽度 ……"> 
<frame> 
<fiamesetrows=" 框 架 窗口 的 高 度 . 框 架 窗口 的 高 度 ……."> 
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在 页 面 同时 使 用 这 两 种 分 隔 方法 时 ， 主 要 是 需要 注意 窗口 大 小 的 设置 与 窗口 个 数 的 统一 。 
实例 代码 如 下 。 


| 例 程 10-4| frameset-cols.html 


01 <framesetrows="30%,70%"> 
<frame> 
<frameset cols="20%,55%,25%"> 


由 代码 中 可 以 看 出 ,首先 将 页 面 进 行 水 平分 割 成 上 下 两 个 窗口 ,而 下 面 的 框架 又 被 垂直 分 
割 成 3 个 窗口 。 因 此 下 面 的 框架 标记 <frame> 被 框架 集 标记 代替 。 运 行程 序 的 效果 如 图 10-4 
所 示 。 


图 10-4 ” 顽 套 分 割 的 效果 


10.1.3 边框 属性 fameborder 


由 前 面 的 几 个 实例 可 以 看 出 ， 在 默认 情况 下 ， 框 架 窗口 的 四 周 有 一 条 边框 线 ， 通 过 
frameborder 参数 可 以 调整 边框 线 的 显示 情况 。 语 法 结构 如 下 所 示 。 

<frameset frameborder=" 属 性 值 '> 其 他 框架 元 素 与 框架 集 </frameset> 

frameborder 属性 的 取 值 ， 可 以 使 用 英文 的 “no” 和 “yes”， 也 可 以 使 用 数字 “0” 和 “1?”。 
其 中 “no” 和 “0” 代 表 没有 边框 ，“yes” 和 “1” 代 表 有 边框 。 

下 面 是 一 个 使 用 frameborder 属性 的 实例 。 其 代码 如 下 所 示 。 
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框架 元 素 


LE frameset-frameborder.html 


01 <framesetrows="30%,55%,15%"> 
<frame frameborder="1"> 
<frameset cols="25%,75%" frameborder="0"> 
<frame > 
<frame> 
</frameset> 
02 <frame frameborder="0"> 
03 </frameset> 
04 </html> 


该 实例 中 ， 指 定 了 第 一 个 框架 含有 边框 ， 第 


和 设置 框架 窗口 的 边框 明示 效果 - 呈 er 


osoft Interast 


二 个 框架 不 含 边框 。 其 代码 运行 后 ， 显 示 效 果 如 OIC 人 


图 10-5 所 示 。 OO ADD um 加 | 
填 址 四 ) | 各 ] nb wy Docments\llvuntitled-5 htnl 到 因 特 到 | 梳 接 ” 


10.1.4 ”边框 宽度 属性 framespacing 


框架 的 边框 宽度 在 默认 情况 下 是 1 像素 ,在 
HIML 中 用 框架 集 元 素 的 边框 宽度 属性 
framespacing 来 定义 框架 区 域 边框 的 宽度 。 
framespacing 属性 定义 的 边框 宽度 ， 在 正 浏览 器 
中 是 有 效 的， 但 是 Firefox 浏览 器 等 不 支持 此 属 


性 。 语 法 结构 如 下 所 示 。 E23 | | i 


<frameset framespacing =" 边框 宽度 "> 其 他 框架 元 素 10-5 ”使 用 frameborder 属性 的 显示 效果 
与 框架 集 </frameset> 
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边框 宽度 就 是 在 页 面 中 各 个 边框 之 间 的 线条 宽度 ， 以 像素 为 单位 。 而 这 一 参数 只 能 对 框架 


集 使 用 ， 对 单个 框架 无 效 。 
下 面 是 一 个 使 用 framespacing 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb frameset-framespacing.html 


01 <framesetrows="40%,60%" framespacing="10"> 
<frame> 
<frameset cols="30%,45%,25%" framespacing="30"> 
<frame > 
<frame > 
<frame > 
</frameset> 
02 </frameset><noframes></noframes> 
03 </html> 


该 实例 中 ， 指 定 了 框架 的 边框 宽度 为 10。 其 代码 运行 后 ， 显 示 效果 如 图 10-6 所 示 。 
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图 10-6 设置 框架 的 边框 宽度 


10.1.5 边框 宽度 属性 border 
框架 集 元 素 的 边框 宽度 属性 border 用 来 定义 框架 区 域 边框 的 宽度 。 语 法 结构 如 下 所 示 。 
<frameset border =" 数 字 值 "> 其 他 框架 元 素 与 框架 集 </frameset> 
其 中 数字 值 的 实际 单位 是 像素 。 下 面 是 一 个 使 用 border 属性 的 实例 。 其 代码 如 下 所 示 。 


frameset-border.html 


01 <framesetcols="150,100"rows="100,50" frameborder="yes" border="20"> 


| 回 殉 3 国史 @ 
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10-7 ”使 用 border 属性 的 显示 效果 
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= 
如 果 同 时 使 用 framespacing 属性 和 border 属性 ， 则 在 正 浏览 器 中 会 使 用 framespacing 属 
性 定义 的 值 。 为 了 在 浏览 器 中 显示 一 致 的 效果 ， 最 好 为 framespacing 属性 和 border 属性 定义 相 
同 的 值 。 


10.1.6 ”颜色 属性 bordercolor 


框架 集 元 素 的 边框 颜色 属性 bordercolor 用 来 定义 框架 区 域 边框 的 颜色 。 语 法 结构 如 下 
所 示 。 


<frameset bordercolor =" 数 字 值 "> 其 他 框架 元 素 与 框架 集 </frameset> 
其 中 数字 值 的 实际 单位 是 像素 。 下面 是 一 个 使 用 bordercolor 属性 的 实例 。 其 代码 如 下 所 示 。 


| 例 程 10-8| frameset-bordercolor.html 
01 <framesetrows="40%,60%" framespacing="10" bordercolor="#FF0000"> 
<frame> 
02 <frameset cols="30%%,45%,25%" framespacing="30" bordercolor ="#9900FF"> 
<frame > 


03 </frameset> 
04 </frameset><noframes></noframes> 
05 </htm> 


该 实例 中 ，01 行 指定 了 框架 的 水 平 边框 宽度 为 10， 同 时 定义 的 框架 边框 的 颜色 为 红色 。 
02 行 指定 竖 直 边框 宽度 为 20， 同 时 定义 框架 边框 颜色 为 紫色 。 其 代码 运行 后 ， 显 示 效 果 如 图 
10-8 所 示 。 


沪 设 置 框架 的 边框 颜色 - Wicrosoft Internet Ezplorer 


10-8 ”使 用 bordercolor 属性 的 显示 效果 
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30.2, 框架 内 容 元 素 <frame> 


框架 内 容 元 素 <frame> 用 来 在 页 面 中 定义 框架 集 的 内 容 。 其 中 每 条 内 容 会 以 从 左 至 右 、 从 
上 到 下 的 顺序 排列 。 语 法 结构 如 下 所 示 。 
<frameset> 
<frame 属性 -" 属 性 值 "> 
</frameset> 
在 网 页 中 ，<frame> 元 素 要 和 <frameset> 元 素 一 起 使 用 。 下 面 是 一 个 使 用 <frame> 元 素 的 实 
例 。 其 代码 如 下 所 示 。 


Wal) frame.html 
01 <framesetcols="50,100"rows="100,50" frameborder="yes" border="0" framespacing="0"> 


该 实例 中 ， 使 用 了 4 个 <frame> 元 素 ， 其 中 第 1 个 和 第 3 个 定义 了 滚 条 属性 。 其 运行 后 的 
显示 效果 ， 如 图 10-9 所 示 。 


10-9 ”使 用 <frame> 元 素 的 显示 效果 


10.2.1 内 容 的 路 径 属 性 src 


显示 内 容 的 路 径 属 性 src 用 来 定义 框架 集 内 容 的 路 径 。 语 法 结构 如 下 所 示 。 
<frame src-" 页 面 源 文件 地 址 "> 
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框架 元 素 


其 中 路 径 值 既 可 以 使 用 相对 路 径 , 也 可 以 使 用 绝对 路 径 。 下面 是 一 个 使 用 src 属性 的 实例 。 


其 代码 如 下 所 示 。 


例 程 10-10 


frame-src.html 


01 <framesetframeborder="no" border="0" framespacing="0"> 


<frame src="http://www.baidu.com" name="main" scrolling="yes" id="main" /> 
02 <frame ></frameset> 


03 </html> 


该 实例 中 ,使 用 了 一 个 框架 集 ， 并 在 其 中 引用 了 百度 的 官方 站 点 的 地 址 。 其 运行 后 的 显示 


效果 ， 如 图 10-10 所 示 。 


济 杠 加 页 面 - icrosoft Internet Explorer 
文件 四 纺 壮 四 “查看 由， 收 蕊 人 工具 中 于 助 如 


四 下 - 引 -回国 的 | 万 时 赤 tx 嫩 


钴 让 | wwy hocmeatsvlivtitletio he 


可 园 # 到 链接 >” 


.6940 
Bai 人 百度 


到 下 


新 闻 网 页 贴吧 知道 MP3 图 片 视 东 


空间 hao123 | 更 多 ?> 


应 Ti WE 


10-10 使 用 sre 属性 的 显示 效果 


10.2.2 ” 滚 条 属性 scrolling 
滚 条 属性 scrolling 用 来 指定 框架 区 域 是 否 产生 滚 条 。 在 框架 页 面 中 ， 如 果 不 指定 滚 条 的 显 


示 ， 则 当 内 容 大 于 显示 区 域 时 滚 条 会 自动 显示 滚 条 。 语 法 结构 如 下 所 示 。 


<frame src=" 路 径 " scrolling=" 属 性 值 "> 


下 面 是 一 个 使 用 scrolling 属性 的 实例 。 其 代码 如 下 所 示 。 


Wl frame-scrolling.html 


01 <framesetcols="50,100"rows="100,50" frameborder="yes" border="10" 


framespacing="10" bordercolor="#000000"> 
<frame scrolling="yes" > 
02 <frame sre="http://www.baidu.com" name="right topframe" scrolling="auto" 1d="right topframe" /> 


<frame > 


03 <frame src="http://www.sina.com" name="right bottomframe" scrolling="auto" id="right_bottomframe" /> 


04 </frameset> 
05 </html> 


该 实例 中 ， 分别 在 各 个 框架 区 域 中 使 用 scrolling 属性 的 各 种 取 值 ， 其 中 一 个 区 域 中 没有 定 
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义 scrolling 属性 。 其 运行 后 的 显示 效果 ， 如 图 10-11 所 示 。 


沁 框 加 页 面 - Wi creseft Internet Fzplaree 
文件 EF) 编辑 EE) 查看 WW) 收藏 和 工具 人 帮助 0 


新 闻 军事 社会 全 
» 
周 EF 开 交 mtp//rm.sina ec| | | 同 | 床 知 区 域 及 合 ) 列 


10-11 使 用 scrolling 属性 的 显示 效果 


10.2.3 固定 尺寸 属性 noresize 


固定 尺寸 属性 noresize 用 来 指定 框架 区 域 的 大 小 不 可 以 拖 动 。 在 框架 页 面 中 ， 如 果 固 定 某 
区 域 的 大 小 ， 则 可 以 在 页 面 中 使 用 鼠标 拖 动 框架 来 改变 其 大 小 。 语 法 结构 如 下 所 示 。 


<frame src=" 路 径 " noresize="noresize"/> 
因为 noresize 属性 没有 值 ， 在 XHTML 中 要 使 用 本 身 的 名 称 作为 值 。 
1. 不 使 用 noresize 属性 的 实例 


下 面 是 一 个 不 使 用 noresize 属性 的 实例 。 其 代码 如 下 所 示 。 


abla frame-noresize.html 


全 


01 <framesetcols="50,100"rows="100,50" frameborder= "yes" border="10" 
framespacing="10" bordercolor="#000000"> 
<frame src="left_ top html" name="left_topframe" scrolling="yes" id="left_ topframe" /> 
<frame src="http://www.baidu.com" name="right_topframe" scrolling="auto" id="right_topframe" /> 
<frame src="left bottom.html" name="left bottomframe" id="left bottomframe" /> 
<frame src="http://www.sina.com" name="right_bottomframe" scrolling="no" id="right_bottomframe" /> 
</frameset> 
03 </htm> 


其 运行 后 的 显示 效果 ， 如 图 10-12 所 示 。 
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ET Te wD i Er EE 
三- 加 -中 国人 | 由 后 刺 t 加 | "| 
十 十 加 伟 ]n-wy necmeatsttvuatittetiz nml [加 车 | 闫 这 


新 闻 盏 社会 寻 育 
2 财经 收 奈 下 全 舱 乐 
北 页 全 和 云 TC~2IC 科技 手机 交友 汽车 


则 EE#R fk [了 厂 果皮 


司 10-12 不 使 用 noresize 属性 的 显示 效果 


2. 使 用 noresize 属性 的 实例 

下 面 是 一 个 使 用 noresize 属性 的 实例 。 如 果 在 上 面 实例 的 框架 中 ， 指 定 了 4 个 区 域 中 的 任 
意 一 个 区 域 的 noresize 属性 ， 则 其 他 区 域 的 大 小 也 不 能 够 改变 。 其 原因 在 于 ，4 个 区 域 是 相互 
联系 的 区 域 。 其 代码 如 下 所 示 。 


Wl frame-noresizetwo.html 
01 <framesetcols="50,100"rows="100,50" frameborder="yes" border="10" 
framespacing="10" bordercolor="#000000"> 
<frame src="left_ top.html" name="left_ topframe" noresize="noresize" scrolling="yes" id="left_topframe" /> 
<frame src="http://www.baidu.com" name="right_topframe" scrolling="auto" id="right_topframe" /> 
<frame src="left_ bottom. html" name="left_bottomframe" id="left_ bottomframe" /> 
<frame sre="http://www.sina.com" name="right_bottomframe" scrolling="no" id="right_bottomframe" /> 


02 </frameset> 
03 -</html> 
其 运行 后 的 显示 效果 ， 如 图 10-13 所 示 。 ETEEmenzzmmermercaac -oa 


ELT ETT 


使 用 noresize 属性 后 的 效果 ， 并 不 是 固定 了 某 个 区 
域 的 尺寸 ， 而 是 固定 区 域 所 占有 的 比例 。 


10.2.4 ”内 容 的 显示 位 置 属性 marginheight、 
marginwidth 
内 容 的 显示 位 置 属性 marginheight、marginwidth 用 
来 指定 框架 区 域内 的 文本 和 区 域 边界 之 间 的 距离 。 其 中 ， 


marginheight 属性 用 来 指定 垂直 方向 的 距离 , marginwidth oe 让 汪 放 
属性 用 来 指定 水 平方 向 的 距离 。 语 法 结构 如 下 所 示 。 J 
间 EEFRRite [| | 隐 ， Fe 戈 


图 10-13 使 用 noresize 属性 的 显示 效果 
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<frame sre=" 路 径 " marginheight "数字 值 " marginwidthb= "数字 值 "> 


可 以 单独 使 用 marginheight 属性 或 者 marginwidth 属性 ， 也 可 以 同时 使 用 两 个 属性 。 其 中 
数字 值 的 实际 单位 是 像素 。 


1. 使 用 marginheight 属性 的 实例 
下 面 是 一 个 使 用 marginheight 属性 的 实例 。 其 代码 如 下 所 示 。 


Wb frame-marginheight.html 


01 <framesetcols="50,100"rows="100,50" frameborder="yes" border="10" 

framespacing="10" bordercolor="#000000"> 

<frame src="left_ top.html" name="left topframe" scrolling="no" id="left topframe" /> 

<frame src="main html" name="mainframe" id="mainframe" title="mainframe" /> 

<frame src="left_ bottom html" name="left bottomframe" scrolling="no" id="left bottomframe" /> 
<frame src="right bottom .html" name="right_ bottomframe" scrolling="no" id="right_bottomframe" /> 
02 </frameset> 
03 </html> 


该 实例 中 ， 在 id 为 “right topframe” 的 区 域 中 ， 定 义 了 marginheight 属性 取 值 为 0， 其 运 
行 后 的 显示 效果 ， 如 图 10-14 所 示 。 
OE mm @| “ 


寻 桩 四 [名] wy Docwments\ii Nntitled-14 htal Ebel 


CT cere 


图 10-14 使 用 marginheight 属性 的 显示 效果 


从 图 10-14 中 可 以 看 到 ， 当 在 id 为 “right_ topframe” 的 区 域 中 ， 定 义 了 marginheight 属性 
后 ，marginwidth 属性 会 默认 的 显示 为 0。 
2. 使 用 marginwidth 属性 的 实例 


下 面 是 一 个 使 用 marginwidth 属性 的 实例 。 其 代码 如 下 所 示 。 
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frame-marginwidth.html 
01 <framesetcols="50,100"rows="100,50" frameborder="yes" border="10" 
framespacing="10" bordercolor="#000000"> 
<frame src="left top.html" name="left topframe" scrolling="no" id="left topframe" /> 
<frame src="right top.html" name="right topframe" scrolling="no" id="right_topframe" marginheight="0" 
marginwidth="20" /> 
<frame src="left bottom html" name="left_ bottomframe" scrolling="no" id="left bottomframe" /> 
<frame src="right_ bottom html" name="right_bottomframe" scrolling="no" 1d="right_bottomframe" /> 
02 </frameset> 
03 <html> 


该 实例 中 ,在 这 为 “right_topframe” 的 区 域 中 ， 定 义 了 marginwidth 属性 取 值 为 20， 其 运 
行 后 的 显示 效果 ， 如 图 10-15 所 示 。 


Tt 


10-15 ”使 用 marginwidth 属性 的 显示 效果 


从 图 10-15 中 可 以 看 到 ， 当 在 id 为 “right_topframe” 的 区 域 中 ， 定 义 了 marginwidth 属性 
后 ， 在 水 平方 向 上 内 容 距离 区 域 左边 界 的 距离 为 20 像素 。 


10.2.5 ”边框 属性 fameborder 
边框 属性 frameborder 用 来 指定 框架 区 域 是 否 含有 边框 。 语 法 结构 如 下 所 示 。 
<fame sre" 路 径 "frameborder =-" 属 性 值 "人 


frameborder 属性 的 取 值 ， 可 以 使 用 英文 的 “no” 和 “yes”, 也 可 以 使 用 数字 “0” 和 “1”。 
其 中 “no” 和 “0” 代 表 没 有 边框 ，“yes” 和 “1” 代 表 有 边框 。 下 面 是 一 个 使 用 frameborder 
属性 的 实例 。 其 代码 如 下 所 示 。 


lo frameframeborder-.html 
01 <framesetcols="50,100"rows="100,50" frameborder="no"> 
<frame src="left_ top html" name="left topframe" scrolling="no" id="left topframe" /> 
<frame src="right top.html" name="right_topframe" scrolling="no" 1d="right_topframe" frameborder="yes" 
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户 
<frame src="left bottom html" name="left bottomframe" scrolling="no" id="left bottomframe" /> 
<frame strc="right_ bottom html" name="right_bottomframe" scrolling="no" id="right_ bottomframe" /> 
02 </frameset> 
03 </htm> 


该 实例 中 ， 在 id 为 “right_topframe” 的 区 域 中 ， 定 义 了 frameborder 属性 取 值 为 “yes”， 
其 运行 后 的 显示 效果 ， 如 图 10-16 所 示 。 


文件 加 久久 查看 名 收 闪 内 玫 助 00 | 
OA- IN| Mm Hm @| ” 


于 址 如 大 jn wy Docments\ti\ntitled-i6 hl ”二 |] 图 和 到 外接 ”| 


左 侧 顶 部 


左 侧 底部 右 侧 底部 


[Sy copter 


10-16 ”使 用 fiameborder 属性 的 显示 效果 


70.3 了 3 了 不 支持 框架 元 素 <noframes> 
| 
不 支持 框架 元 素 <nofames> 用 来 为 不 能 显示 框架 的 浏览 器 制作 内 容 。 因 为 有 一 些 浏览 器 或 
者 浏览 设备 中 并 不 支持 框架 元 素 ， 此 时 将 不 能 正常 显示 内 容 。 使 用 <noftames> 元 素 可 以 使 此 类 
浏览 器 中 显示 <noftames> 元 素 中 的 内 容 。 语 法 结构 如 下 所 示 。 


<html> 
<noframes> 内 容 部 分 </noframes> 
</html> 


使 用 <noframes> 元 素 ， 对 支持 框架 的 页 面 的 显示 效果 并 没有 影响 。 


10.4 | 内 联 框架 元 素 <iframe> 


内 联 框架 元 素 <ifame> 用 来 在 页 面 的 任何 位 置 定义 一 个 框架 区 域 。 使 用 <frameset> 元 素 只 
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能 用 蔡 换 页 面 主体 元 素 <body> 的 方式 来 定义 框架 ， 但 是 使 用 <iframe> 元 素 可 以 在 页 面 主体 元 素 
<body> 中 任何 可 以 使 用 内 联 元 素 (如 <img> 元 素 等 ) 的 地 方 定义 框架 。 语 法 结构 如 下 所 示 。 
<iframes> 内 容 部 分 </ifiames> 


下 面 是 一 个 使 用 <iframe> 元 素 的 实例 。 其 代码 如 下 所 示 。 
iframe.html 


01 <body> 
这 是 一 个 使 用 内 联 框 架 的 实例 <br 记 
这 是 内 联 框架 <iframe sre="http://www.baidu.com" width="400" height="200"></iframe> 


02 </body> 

03 <html> 

这 里 选用 百度 作为 内 联 框 的 内 容 ， 其 运行 后 的 显示 效果 如 图 10-17 所 示 。 
马 无 标题 文档 - icrosoft Internet PRICE IO 
文件 中 ”编辑 和 查看 W) 收藏) 工具 CL) | 帮助 [3 


Oa: © HIN Pa wm | “ 
地 址 四 ) [多]D: wy pocwments\tiVntited-i7.htm 。 梧 加 9 外 > 
这 是 一 个 使 用 内 联 框 架 的 实例 中 
这 是 内 联 框 架 


Bai 作 asE | 


新 闻 网 页 贴吧 知道 MP3 图 . 


十 寿 阿 谢 | 
图 10-17 使 用 <iframe> 元 素 的 显示 效果 


[ 辟 装 [区域 扬 全 ) 


了 0.5 | 框架 元 素 中 的 链接 


在 框架 元 素 中 使 用 链接 ， 和 普通 的 链接 略 有 不 同 。 在 框架 元 素 中 ， 可 以 在 链接 中 指定 打开 
窗口 的 位 置 。 从 而 实现 在 一 个 框架 区 域 中 ， 通 过 链接 控制 另 一 个 框架 区 域 的 内 容 。 下 面 进行 详 
细 的 讲解 。 

通过 在 <a> 元 素 中 使 用 链接 的 目标 属性 target, 来 定义 打开 链接 的 目标 区 域 。 语 法 结构 如 下 
所 示 。 


<a href=" 路 径 " target=" 目 标 区 域 的 id">……</a> 
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在 target 属性 的 取 值 中 , 使 用 框架 内 容 元 素 <frame> 的 标记 id, 来 指定 链接 打开 的 目标 。 下 
面 是 一 个 使 用 target 属性 的 实例 。 其 框架 页 面 的 代码 如 下 所 示 。 


站 wa framelink html 
01 <framesetrows="*,80" cols="*" frameborder="yes" border="10" bordercolor="#000000" 
framespacing="10"> 
<frameset cols="*,150" frameborder="yes" border="10" bordercolor="#000000" framespacing="10"> 
<frame src="main.html" name="mainframe" id="mainframe" title="mainframe" /> 
<frame src="right.html" name="rightframe" scrolling="no" noresize="noresize" id="rightframe" 
title="rightframe" /> 
02 </frameset> 
03 <frame src="bottom html" name="bottomframe" scrolling="no" noresize="noresize" id="bottomframe" 
title="bottomframe" /> 
04 </frameset><noframes></noframes> 
05 </html> 


在 框架 页 面 中 ， 定 义 了 所 有 框架 内 容 的 id 属性 。 在 每 个 区 域 的 调用 页 面 中 ， 就 可 以 使 用 
相应 的 id 属性 值 来 确定 链接 的 打开 目标 。 其 中 含有 链接 的 “righthtml” 页 面 的 代码 如 下 所 示 。 


right.html 
01 <htm> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 body{ 
background:#666666; 
font-size: 18px: 
color-#fFFFFE: 
font-weight:bold:} 
07 af 
color#fEPPE } 
08 </style> 
09 </head> 
10 <body> 
11 <u> 
<li><a hre="http://www.baidu.com" target—"mainframe"> 百 度 </a></li> 
<li><a href="http:/www.sina.com.cn" target="mainframe"> 新 浪 </a></li> 
<li><a hre="http://www.sohu.com" target="mainframe"> 搜 狐 </a></li> 
<li><a hre 人 ="http://www.yahoo.com" target="mainframe"> 雅 虎 </a></li></ul> 
12 </body> 
13 <htm> 


其 中 框架 页 面 运 行 后 的 显示 效果 ， 如 图 10-18 所 示 。 
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CE 


画 [om 
图 10-18 相当 负面 的 册 的 示 冰 果 


当 单 击 右 侧 的 某 个 链接 时 ,新 的 页 面 将 在 左 侧 含有 老虎 图 片 的 区 域 中 打开 。 单 击 其 中 的 链 
接 时 ， 就 会 显示 这 些 页 面 。 


0 本 章 习 题 


一 、 选 择 题 
1. 要 创建 一 个 如 图 10-19 所 示 的 框架 ， 应 使 用 以 下 代码 : ( ) 


1 ET pa Cy 工具 CY) 古 助 人 ) 


Ey ] 
了 ] wR 到 | 


/地 地 他) jo \ 实 他 YchpkVtu4-50 htn 


3 | [| E27. 
图 10-19 框架 
A. <FRAMESET cols="100.* "> 
<FRAME> 
<FRAMESET cols="120,*"> 
<FRAME> 
<FRAME> 
</FRAMESET> 
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</FRAMESET> 
B.<FRAMESET rows="100,* "> 
<FRAME> 
<FRAMESET cols="120,*"> 


</FRAMESET> 
C.<FRAMESET cols="100,* "> 
<FRAME> 
<FRAMESET rows="120,*"> 


</FRAMESET> 
2. 要 创建 一 个 如 图 10-20 所 示 的 框架 , 应 
使 用 以 下 代码 : (” ) 
A. <FRAMESET cols="100,* "> 
<FRAME> 
<FRAMESET cols="150.*"> 


</FRAMESET> 
B.<FRAMESET rows="100,* "> 
<FRAME> 
<FRAMESET cols="150,*"> 


on We le 


EEC 3 


图 10-20 框架 


< 人 FRAMESET> 
C.<FRAMESET cols="100,* "> 
<FRAME> 
<FRAMESET rows="150,*"> 


</FRAMESET> 


</FRAMESET> 

3. 以 下 关于 框架 显示 效果 的 说 法 中 ， 错 误 的 是 : (。 ) 

A. 只 有 所 有 相 邻 框架 的 边框 都 设置 为 0， 才 能 隐藏 边框 。 

B. 可 以 在 FRAME 标记 符 中 使 用 marginwidth 和 marginheight 属性 控制 框架 内 容 与 杠 
架 边框 之 间 的 距离 。 

C. 框架 的 边框 默认 可 以 移动 。 

D. 框架 默认 时 有 滚动 条 。 

4. 有 关 框 架 与 表格 的 说 法 正确 的 有 : (  “)。 

A. 框架 对 整个 窗口 进行 划分 B. 每 个 框架 都 有 自己 独立 网 页 文件 

C. 表格 比 框架 更 有 用 D. 表格 对 页 面 区 域 进行 划分 

5. 在 一 个 框架 的 属性 面板 中 ， 不 能 设置 下 面 哪 一 项 。( ) 

A. 源 文件 B. 边框 颜色 C. 边框 宽度 D. 滚动 条 


二 、 填 空 题 


1. 在 一 个 分 为 左右 两 个 框架 的 框架 组 中 ， 要 想 使 左 侧 的 框架 宽度 不 变 ， 应 该 用 
单位 来 定制 其 宽度 ， 而 右 侧 框架 则 使 用 __ 单 位 来 定制 。 

2. 框架 主要 有 和 两 部 分 组 成 。 

3. 框架 中 用 属性 来 指定 行 的 数目 ， 用 。 ”来 指定 列 的 数目 。 

4. 把 一 个 页 面 分 成 30%、20%、50% 的 3 列 代码 写法 是 ( 写 出 分 列 代码 即 可 ): 

5. 把 一 个 页 面 分 成 40%、60% 的 2 行 代码 写法 是 : 

6. 在 一 个 2 行 3 列 的 框架 中 ， 设 置 水 平 边框 宽度 为 10。 垂 直 边 框 宽度 为 20 的 代码 写法 
是 : 


三 、 实 战 练习 
已 知 网 页 初始 效果 如 图 10-21 所 示 ， 整 个 窗口 分 为 左右 两 框 ， 左 边框 架 为 150 像素 ， 单 击 


左边 框架 中 的 “文件 1” 超 链接 ,将 在 右边 框架 中 显示 “内 容 1”; 单 击 左 边框 架 中 的 “文件 2” 
超 链 接 ， 将 在 当前 整个 窗口 中 显示 “内 容 2”( 即 框架 结构 消失 )。 所 有 的 超 链接 均 没有 下 划 线 。 
请 填写 以 下 源 代码 中 的 空白 。 注 意 : 所 有 5 个 文件 都 位 于 同一 目录 下 。 


<HIML><HEAD><TITLE> 框 架 结构 </TITLE></HEAD> 


<FRAMESET 本 > 

<FRAME src="content.htm"> 

<FRAME src="mainhtm"name= > 

</FRAMESET> 

<HIMI> 

----------- ----Content.htm--- 

<HIMI> 

<HEAD><TITLE> 目 录 </TITLE> 人 
<STYLE> 图 10-21 网 页 初始 效果 


{text-decoration:none}</STYLE> 


</HEAD> 
<BODY> 
<A href=filel.htm target="content"> 文 件 1</A><P> 


<A href-file2.htm target= > 文件 2</A> 
<BODY> 
</HIMI> 

————inainhtm———————————— 
<HTMI> 内 容 </HIML> 
--- 一 一 一 外 el htm-- 一 一 一 一 


<HTMI> 内 容 1</HIMI> 


—file2 htm———— 
<HTMI> 内 容 2</HIMI> 
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在 网 页 设计 中 ， 需 要 使 用 各 种 不 同 的 元 素 和 内 容 。 为 了 页 面 更 加 美观 ， 通 常会 给 页 面 添加 
一 些 背景 、 边 框 之 类 ， 使 页 面 的 主题 更 加 突出 。 在 网 页 设计 中 ，CSS 部 分 就 是 担任 这 个 角色 ， 
其 具体 的 实现 过 程 ， 要 依附 于 其 他 的 相关 代码 。 


六 、 本 章 主 要 内 容 有 : 


@ 网 页 设计 中 使 用 的 各 种 内 容 。 
@ 在 网 页 中 简单 使 用 CSS 的 方法 。 
@ 调用 CSS 的 方法 。 


跟 我 学 HTML+CSS 


91.1 | 什么 是 CSS 


CSS 又 称 为 级 联 样 式 表 ， 是 Cascading Style Sheet 的 缩写 ,通常 也 简称 为 样式 表 。 是 W3C 
组 织 制定 的 ， 用 于 控制 网 页 样式 的 一 种 标记 性 语言 。 使 用 CSS 能 使 网 页 看 起 来 更 加 美观 漂亮 。 
下 面 是 一 个 应 用 CSS 的 页 面 的 实例 。 其 具体 代码 如 下 所 示 。 


Ws example.html 


01 =html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
04 ”<title>CSS 样式 </title> 
05 <style> 
<!-- 这 里 是 CSS 样式 表 开始 --> 


07 .content{ 
margin:60px auto: 
height:150px: 
width:3S0px: 
border:8px solid red; 
background:yellow; 
line-height:150px:; 
text-align:center: 
font-size:24px;} 
<!-- 这 里 是 CSS 样式 表 结 束 --> 
08 </style> 
09 </head> 
10 <body> 
<! 一 这 里 是 元 素 引 用 css 样式 的 代码 -> 
<div class="main"> 
<div class="content"> 
CSS 样式 </div></div> 
11 </body> 
12 </htm> 


代码 中 <style> 元 素 所 包含 的 部 分 就 是 样式 表 的 部 分 。 引 用 样式 所 使 用 的 元 素 是 class 属性 。 
应 用 样式 后 的 页 面 效 果 如 图 11-1 所 示 。 如 果 取 消 定义 的 样式 表 ， 则 显示 效果 如 图 11-2 所 示 。 

从 图 11-1 和 图 11-2 可 以 看 到 ， 取 消 了 CSS 后 页 面 只 剩 下 了 内 容 部 分 ， 所 有 包括 背景 、 字 
体 样式 、 高 度 等 修饰 部 分 都 消失 了 。 

从 实例 中 可 以 看 出 ，CSS 的 作用 就 是 控制 页 面 中 内 容 部 分 的 表现 。 通 过 使 用 CSS 布局 可 
以 使 得 网 站 外 观 更 加 美观 、 结 构 更 加 清晰 。 使 用 样式 表 来 实现 页 面 表现 的 控制 ， 是 W3C 制定 
的 Web 标准 中 推荐 使 用 的 方法 。 
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CSS 的 概念 


文件 四 ”编辑 于 ) 查看 WD 收 意 ) 工具 中 帮助 吕 


[3 
Om ©O- ddW Pe lB 于 


虱 cs: 样 式 - icrosoft Internet Frplerere IslE: 


印证 加 || 尼 ] 0: wy Docenents\l2\ntitledl ht ElSE 文件 四 ”编辑 查看 四 收 训 中 工具 IJ ”六 
习 


四 三 -加 -四 回国 | 万 疗 4 
| 地址 加 候 ] n: wy pocwnents\iz\ntitz| 国 转 到 | 名 接 六 
不 使 用 css 样 式 的 页 面 四 


二 一 
[Eg [El mer EE 有 4 
图 11-1 使 用 CSS 样式 的 显示 效果 11-2 取消 CSS 样式 的 显示 效果 


71.2 | CSS 与 网 页 显示 效果 的 关系 


使 用 CSS 对 页 面 进行 布局 ， 可 以 避免 大 量 元 余 和 重复 的 代码 ， 同 时 使 页 面 的 更 新 和 维护 
更 加 方便 。CSS 布局 之 所 以 能 够 具有 这 样 的 优势 ， 其 原因 在 于 : 使 用 CSS 布局 的 页 面 ， 结 构 和 
表现 可 以 独立 控制 。 通过 修改 CSS 文件 中 定义 的 样式 , 可 以 统一 修改 站 点 中 所 有 页 面 中 相同 的 
样式 。 同 时 ， 由 于 页 面 中 剥离 了 修饰 内 容 ， 减 少 了 大 量 的 元 余 代 码 ， 使 代码 更 加 简洁 清晰 。 由 
于 CSS 布局 其 清晰 的 结构 、 简 洁 的 代码 、 高 效 的 浏览 速度 ， 使 得 CSS 布局 的 页 面 ， 对 浏览 者 
和 网 站 拥有 者 都 有 极 大 的 好 处 ， 具 体 表现 在 以 下 两 个 方面 。 


1. 


> 
> 


Dv 


网 站 浏览 者 的 好 处 

页 面 更 加 简洁 ， 浏 览 速度 更 快 ， 节 省 了 浏览 页 面 的 时 间 。 

因为 代码 的 语义 结构 更 加 清晰 并 具有 扩展 性 ， 使 得 页 面 能 够 被 更 多 的 用 户 ， 更 广泛 的 
浏览 设备 所 支持 。 

结构 和 表现 的 分 离 ， 使 用 户 可 以 独立 选择 界面 样式 ， 页 面 的 显示 效果 更 加 灵活 ， 例 如 
现在 的 博客 系统 等 。 

通过 的 独立 的 CSS 样式 ， 更 加 便于 控制 页 面 的 打印 。 


.网 站 拥有 者 的 好 处 


CSS 布局 时 使 用 了 清晰 的 语义 结构 ， 便 于 站 点 的 更 新 和 升级 。 
对 于 流量 很 大 的 站 点 ， 使 用 CSS 布局 ， 可 以 更 大 限度 地 压缩 页 面 的 大 小 ， 大 大 降低 了 
成 本 。 
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跟 我 学 HTML+CSS 


> CSS 布局 的 页 面 更 容易 被 搜索 引擎 辨识 ， 方 便 站 点 的 推广 。 

> 通过 编写 不 同 的 CSS 样式 ， 可 以 在 不 影响 内 容 的 情况 下 ， 对 网 页 进行 任意 改版 。 

由 于 CSS 布局 的 页 面 带 来 的 好 处 越 来 越 明显 ， 使 得 互联 网 中 许多 传统 布局 的 站 点 都 改 为 
使 用 CSS 布局 。CSS 布局 也 将 会 是 网 页 布局 的 发 展 趋 势 。 

随 着 Web 标准 的 提出 ， 以 及 互联 网 对 规范 化 的 要 求 越 来 越 高 ， 大 量 的 已 有 网 站 和 新 建 网 
站 都 采用 了 CSS 进行 布局 。 使 用 CSS 进行 网 页 布局 ， 不 但 可 以 使 代码 更 加 简洁 ， 增 加 代码 的 
可 重用 性 ， 同 样 也 可 以 制作 出 非常 精美 的 页 面 。 下 面 是 一 
些 使 用 CSS 进行 页 面 布局 的 站 点 ， 从 页 面 的 各 种 表现 效 
果 中 ， 可 以 看 出 CSS 控制 页 面 表现 的 强大 优势 。 


1. http:/www.alexcohaniuc.com 


该 站 点 使 用 左右 两 栏 的 布局 ， 运 用 简洁 干净 的 色彩 ， 
明确 简单 的 布局 达到 一 种 一 目 了 然 的 效果 。 在 站 点 页 面 中 
使 用 了 各 种 修饰 的 内 容 , 使 页 面 在 简洁 的 前 提 下 又 不 失 丰 
富 ， 其 显示 效果 如 图 11-3 所 示 。 


2. http:/www.vitiligo.com.br 

该 站 点 使 用 模 向 两 栏 ,纵向 三 栏 的 布局 方式 , 使 页 面 , 
的 内 容 显 得 更 加 丰富 。 同 时 使 用 圆 弧 装 的 分 隔 线 ， 对 页 面 。 图 113 htp/wwwalexeobaniue-com 
进行 分 隔 ， 使 页 面 在 简洁 中 富有 变化 ， 其 显示 效果 如 图 11.4 所 示 。 


Wi 


图 11-4 http://www.vitiligo.com.br 
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3. http://nb.bottledsky.com 


该 站 点 使 用 纵向 三 栏 的 布局 方式 ,同时 在 页 面 的 顶部 和 底部 使 用 渐变 的 背景 图 片 ,实现 在 
不 同 的 分 辩 率 下 都 能 够 显示 100% 的 宽度 。 在 实际 制作 页 面 的 时 候 ， 使 用 重复 的 背景 图 片 ， 适 
应 页 面 宽度 变化 的 方法 ， 经 常 被 采用 ， 其 显示 效果 如 图 11-5 所 示 。 
TED 


[0 


11-5 http://nb.bottledsky.com 


91.3 | 使 用 CSS 的 方法 


在 页 面 中 使 用 CSS 样式 ， 通常 有 3 种 方法 : 元素 中 直接 添加 样式 、 从 页 面 头 部 <style> 元 
素 中 调用 、 采 用 链接 的 形式 调用 。 每 种 方法 的 添加 位 置 和 格式 都 有 所 区 别 ， 并 且 具 有 不 同 的 优 
先 级 ， 其 中 推荐 使 用 的 方法 是 使 用 链接 的 外 部 样式 。 


11.3.1 元素 中 直接 添加 样式 


在 行内 添加 CSS， 就 是 将 CSS 样式 添加 在 页 面 的 元 素 标签 中 ， 此 时 样式 的 作用 范围 为 元 
素 标签 开始 和 结束 之 间 。 行 内 添加 CSS 样式 ， 具 有 最 高 的 优先 级 。 
下 面 是 一 个 使 用 行内 添加 CSS 样式 的 实例 ， 其 代码 如 下 所 示 。 


跟 我 学 HTML+CSS 


LE example.html 


01 <htm> 
02 <head> 
03 ”<title> 文 档 标题 部 分 </title> 
04 </head> 
05 <body> 
<div style="font-size:36px;line-height:100px:"> 这 是 一 个 使 用 内 容 样式 的 实例 。</div> 
06 <body> 
07 </html> 


以 上 的 代码 ， 使 用 style 属性 将 CSS 样式 添加 在 <div> 元 素 中 。 其 中 CSS 样式 的 含义 为 : 
定义 字体 大 小 为 36 像素 ， 行 高 为 100 像素 。 代 码 在 运行 后 ， 显 示 效果 如 图 11-6 所 示 。 


汪 文 若 标 题 部 分 - Wicrese ft Internet Explorer 


E02 Ea 


地 址 种 ) | 巷 ]D; Wiy Docunen' ts\12AUntitled-3. htnl 


x| 


这 是 一 个 在 元 素 中 直接 添加 样式 的 实 


Ci Crater 
图 11-6 行内 添加 CSS 样式 后 的 显示 效果 


11.3.2 ”从 页 面 头 部 <style> 元 素 中 调用 


内 嵌 式 调用 CSS 样式 ， 就 是 通过 在 <style> 元 素 中 定义 CSS 代码 ， 页 面 中 调用 相应 样式 的 
方式 定义 CSS 样式 。 在 <style> 中 定义 的 CSS 样式 必须 通过 页 面 中 元 素 的 名 称 或 定义 相应 的 属 
性 才能 够 调用 。 内 嵌 式 调用 CSS 样式 ， 优 先 级 低 于 行内 添加 的 CSS 样式 。 

下 面 是 一 个 使 用 内 嵌 式 调用 CSS 样式 的 实例 ， 其 代码 如 下 所 示 。 


Wb example.html 


01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 文 档 标题 部 分 </title> 
05 <style> 
06 div{ 
font-size:24px:; 
line-height:150px: 
color:block:; 
background-color:yellow: 
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07 </style> 
08 </head> 


<body> 
<div> 这 是 从 页 面 头 部 元 素 中 调用 css 的 实例 。</div> 


以 上 的 代码 中 ， 通 过 在 <head> 元 素 中 定义 <style> 元 素 ， 完 成 CSS 样式 的 定义 。 其 中 定义 
的 CSS 样式 除了 定义 字体 大 小 和 行 高 之 外 ， 还 定义 了 字体 的 颜色 和 背景 颜色 。 代 码 在 运行 后 ， 
显示 效果 如 图 11-7 所 示 。 


下 文档 标题 部分 - 于 i 
文件 四 ”编辑 四 pr 本 ET 


oa 0 | | Pm me 


| 
EE 
图 11-7 内 嵌 CSS 样式 后 的 显示 效果 


11.3.3 ”采用 链接 的 形式 调用 


链接 形式 调用 CSS 样式 , 就 是 将 CSS 样式 定义 在 一 个 外 部 的 文件 中 , 然后 通过 使 用 <link> 
元 素 ， 在 页 面 中 调用 这 个 外 部 文件 。 独 立 的 CSS 文件 后 级 为 “.css” 为 文本 格式 ， 可 以 保存 在 
磁盘 的 任意 位 置 。 链 接 外 部 的 CSS 样式 ， 优 先 级 最 低 。 

下 面 是 一 个 链接 外 部 CSS 样式 的 实例 ， 其 代码 如 下 所 示 。 
example.html 

01 <htm> 

02 <head> 

03 ”<title> 文 档 标题 部 分 </title> 

04 <link href="css.css" type="text/css" rel="stylesheet" /> 

05 </head> 


<body> 
<div> 这 是 一 个 使 用 内 容 样式 的 实例 。</div> 
07 </body> 
08 </html> 


以 上 的 代码 ， 使 用 <link> 元 素 ， 链 接 了 一 个 名 称 为 “css.css” 的 外 部 样式 文件 。 这 个 外 部 
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样式 文件 中 定义 的 CSS 代码 如 下 所 示 。 
O01 div{ 
font-size:36px: 
ee 
ee #999999; 
border: 15px solid gray; 
} 
在 这 段 CSS 代码 中 ， 除 了 定义 字体 大 小 、 行 高 、 字 体 的 颜色 和 背景 颜色 之 外 ， 还 定义 了 
元 素 的 边框 为 15px 的 灰色 实 线 边框 。 代 码 在 运行 后 ， 显 示 效 果 如 图 11-8 所 示 。 


这 是 从 页 面 头 部 元 素 中 调用 css 


的 实例 。 


11-8 ”链接 外 部 CSS 样式 后 的 显示 效果 


91.4 本 章 习题 


一 、 选 择 题 


1. 下 面 说 法 错误 的 是 (。 )。 

A. CSS 样式 表 可 以 将 格式 和 结构 分 离 

B. CSS 样式 表 可 以 控制 页 面 的 布局 

C. CSS 样式 表 可 以 使 许多 网 页 同时 更 新 

D. CSS 样式 表 不 能 制作 体积 更 小 下 载 更 快 的 网 页 

2. CSS 样式 表 不 可 能 实现 ( 。 ) 功 能 。 

A. 将 格式 和 结构 分 离 B. 一 个 CSS 文件 控制 多 个 网 页 
C. 控制 图 片 的 精确 位 置 D. 兼容 所 有 的 浏览 器 
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3. 若 要 在 网 页 中 插入 样式 表 main.css， 以 下 用 法 中 ， 正 确 的 是 (。 )。 
A. <Link hre 全 "main.css" type=text/css rel=stylesheet> 

B. <Link Src="main.css" type=text/css rel=stylesheet> 

C. <Link hre 人 "main.css" type=text/css> 

D. <Include hre 伟 "main.css" type=text/css rel=stylesheet> 

二 、 填 空 题 


1. CSS 又 称 为 级 联 样式 表 ， 是 Cascading Style Sheet 的 缩写 ， 通 常 也 简称 为 a 荐 
W3C 组 织 制定 的 ， 用 于 控制 的 一 种 标记 性 语言 。 


2. 在 页 面 中 使 用 CSS 样式 ， 通 常 有 3 种 方法 : y 和 采 
用 链接 的 形式 调用 。 


三 、 简 答题 
1. 什么 是 CSS? 
2. 练习 使 用 3 种 调 入 CSS 的 方法 。 


ao SA 


CSS 人 的 语 污 


在 CSS 中 ， 选 择 符 的 种 类 很 多 ， 每 种 选择 符 的 优先 级 也 不 同 。 这 些 选 择 符 包 括 ，id 选择 
符 、 类 选择 符 、 类 型 选择 符 、 伪 类 等 。 同 时 还 可 以 使 用 子 选择 符 对 样式 进行 精确 定位 。 或 者 使 
用 选择 符 分 组 的 方法 ， 同 时 定义 几 个 选择 符 中 的 样式 。 具 体内 容 在 本 章 中 将 一 一 讲述 。 
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全、 本章 主要 内 容 有 : 


@ 熟悉 CSS 中 的 各 类 选择 符 的 属性 及 用 法 。 
@ 了 解 CSS 中 属性 和 属性 值 的 特点 。 
@ 简单 了 解 块 元 素 和 内 联 元 素 。 


跟 我 学 HTML+CSS 


2 选择 符 


在 CSS 中 ， 选 择 符 的 种 类 很 多 ， 每 种 选择 符 的 优先 级 也 不 同 。 这 些 选择 符 包括 ，id 选择 
符 、 类 选择 符 、 类 型 选择 符 、 伪 类 等 。 同 时 还 可 以 使 用 子 选 择 符 对 样式 进行 精确 定位 ， 或 者 使 
用 选择 符 分 组 的 方法 ， 同 时 定义 几 个 选择 符 中 的 样式 。 其 具体 内 容 如 下 所 示 。 


12.1.1 id 选择 符 


id 选择 符 是 所 有 选择 符 中 优先 级 最 高 的 。 其 语法 结构 如 下 所 示 。 
# 选 择 符 名 称 


在 定义 这 选择 符 的 时 候 ， 必 须 使 用 英文 的 “# ”加 选择 符 的 名 称 。 在 页 面 元 素 中 ， 使 用 相 
应 的 id 属性 值 ， 来 调用 id 选择 符 中 定义 的 CSS 样式 。 
下 面 是 一 个 使 用 id 选择 符 的 示例 ， 其 代码 如 下 所 示 。 


pu id.html 
01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 #man 


width:450px: 
height:180px: 
background:#FF33CC; 


07 </style> 
08 </head> 
09 <body> 
<div id="man"> 这 里 是 一 个 使 用 id 选择 符 的 示例 </div> 
10 </body> 
11 <htm> 


以 上 的 代码 中 的 06 行 代码 就 是 id 选择 符 。 

在 这 个 id 选择 符 “#man” 中 ， 定 义 了 宽度 属性 值 为 430px， 高 度 属性 值 为 180px， 背 景 颜 
色 为 紫色 。 同 时 在 主体 元 素 中 的 <div> 元 素 中 ， 定 义 id 属性 值 与 id 选择 符 “#” 后 面 的 内 容 相 
同 。 代 码 运 行 后 ， 页 面 的 显示 效果 如 图 12-1 所 示 。 
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属 王  Trrr 广 三 
图 12-1 使 用 这 选择 符 后 的 显示 效果 


12.1.2 ”类 选择 符 


类 选择 符 用 来 定义 页 面 中 可 以 重复 使 用 的 CSS 属性 ， 其 优先 级 低 于 id 选择 符 。 其 语法 结 
构 如 下 所 示 。 

.选择 符 名 称 

在 定义 类 选择 符 的 时 候 ， 要 使 用 英文 的 “.” 加 选择 符 的 名 称 。 在 页 面 元 素 中， 使 用 相应 


的 class 属性 值 ， 来 调用 类 选择 符 中 定义 的 CSS 样式 。 
下 面 是 一 个 使 用 类 选择 符 的 示例 ， 其 代码 如 下 所 示 。 


Ld example.html 


02 <head> 
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > 
04 ”<tile> 类 选择 符 </title> 


<div class="main"> 这 是 一 个 使 用 类 选择 符 的 示例 ， 其 中 的 .main 就 是 我 们 定义 的 类 选择 符 </div> 
10 </body> 
11 </html> 


以 上 的 代码 中 ，06 行 中 在 类 选择 符 “.main” 中 ， 定 义 了 宽度 属性 值 为 350px， 高 度 属性 
值 为 120px， 背 景 颜色 为 深 灰 色 。 同 时 在 主体 元 素 中 的 <div> 元 素 中 ， 定 义 class 属性 值 与 类 选 
择 符 “.” 后 面 的 内 容 相 同 。 代 码 运 行 后 ， 页 面 的 显示 效果 如 图 12-2 所 示 。 


lol x 


符 


12-2 ”使 用 类 选择 符 后 的 显示 效果 


12.1.3 ”类 型 选择 符 

类 型 选择 符 是 按照 XHTML 中 使 用 的 相应 元 素 名 称 来 定义 的 CSS 选择 符 。 其 语法 结构 如 
下 所 示 。 

选择 符 名 称 

在 使 用 类 型 选择 符 的 时 候 ， 可 以 直接 使 用 元 素 的 名 称 定义 ， 在 页 面 中 所 有 与 类 型 选择 符 相 


同 的 元 素 ， 都 将 使 用 该 元 素 中 定义 的 样式 。 
下 面 是 一 个 使 用 类 型 选择 符 的 示例 ， 其 代码 如 下 所 示 。 


08 
09 <body> 
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<div> 使 用 CSS 的 类 型 选择 符 </div> 
<p> 这 里 就 是 类 型 选择 符 作用 的 地 方 <p> 
<p><img sre="pic.jpg" width="200" /></p> 
10 </body> 
11 <html> 
以 上 的 代码 中 ，06 行 在 类 型 选择 符 p 中 , 定 。EEEEEEECEEC 
义 了 宽度 属性 值 为 300px， 高 度 属性 值 为 50px， 
背景 颜色 为 深 灰 色 。 然 后 在 页 面 中 定义 了 一 个 
<p> 元 素 。 代码 运行 后 , 页 面 的 显示 效果 如 图 12-3 
所 示 。 
从 图 12-3 可 用 看 出 ， 当 使 用 类 型 选择 符 后 ， 
使 用 相同 名 称 的 相关 元 素 的 样式 发 生 了 改变 。 但 
是 因为 图 片 的 关系 ， 在 第 二 个 类 型 选择 符 中 高 度 
适应 了 图 片 的 高 度 。 


12.1.4 伪 类 

伪 类 指 的 是 一 类 特殊 的 选择 符 ， 通 过 这 类 选 
择 符 ， 可 以 定义 某 种 鼠标 触发 时 间 的 显示 效果 。 
其 语法 结构 如 下 所 示 。 

选择 符 名 称 : 伪 类 名 称 

在 使 用 伪 类 的 时 候 ， 要 对 应 某 个 其 他 的 选择 符 ， 这 个 选择 符 可 以 使 用 id 选择 符 、 类 选择 
符 或 者 类 型 选择 符 ， 但 通常 会 将 伪 类 定义 在 链接 内 容 。 伪 类 都 有 固定 的 写法 ， 一 般 格式 为 英文 
的 “:” 加 伪 类 的 名 称 。 

下 面 是 一 个 使 用 伪 类 选择 符 的 示例 ， 其 代码 如 下 所 示 。 


We example.html 


12-3 ”使 用 类 型 选择 符 后 的 显示 效果 


01 <html > 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 伪 类 </title> 

05 <style> 


06 ahover 


display:block: 
width:400px; 
height:100px: 
background:#cccece; 
border:4px solid #000000; 
Padding:6px; 
} 
07 </style> 
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08 <head> 

09 <body> 

<a hre 人 "> 这 是 一 个 使 伪 类 的 示例 </a> 

10 </body> 

11 </html> 

以 上 的 代码 中 ，06 行 在 a 选择 符 后 面 ， 定 义 了 “:hover” 伪 类 。 这 个 伪 类 的 含义 是 ， 定义 
鼠标 悬 停 时 候 的 显示 效果 。 在 伪 类 选择 符 中 ， 首 先 定义 了 显示 方式 属性 (display) 的 取 值 为 块 属 
性 (block)。 然 后 定义 了 宽度 属性 值 为 400px， 高 度 属性 值 为 100px， 背 景 颜色 为 浅 灰 色 ， 并 加 
了 宽度 为 4 的 黑色 边框 。 代 码 运行 后 ， 当 鼠标 悬 停 在 链接 内 容 上 时 ， 页 面 的 显示 效果 如 图 12-4 
所 示 。 


B/D] | | cm 
图 12-4 ”使 用 伪 类 选择 符 后 的 显示 效果 


12.1.5” 子 选择 符 


子 选择 符 用 来 精确 定位 某 个 元 素 。 其 语法 结构 如 下 所 示 。 
选择 符 1 选择 符 2 


在 每 个 选择 符 之 间 使 用 空格 进行 分 隔 ， 其 含义 为 : 在 第 一 个 选择 符 中 使 用 第 二 个 选择 符 的 
内 容 。 


三 二 
| 认 注 意 
Lr 


一 ”在 使 用 子 选 择 符 的 时 候 ,， 选择 符 所 在 的 元 素 之 间 要 有 谋 套 关系 ， 否 则 子 选择 符 不 
能 够 正常 发 挥 作用 . 


下 面 是 一 个 使 用 子 选择 符 的 示例 ， 其 代码 如 下 所 示 。 


ba example.html 


01 <html > 

02 <head> 

03 ”<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tile> 子 选择 符 </title> 


<p> 这 里 是 包含 在 div 里 的 p 元素 ,和 div 一 起 才 有 作用 </p></div> 
<p> 这 里 是 独立 的 p 元 素 </p> 

10 </body> 

11 </html> 


以 上 的 代码 中 ，06 行使 用 子 选择 符 ， 定 义 了 元 素 的 宽度 属性 值 为 300px， 高 度 属性 值 为 


100px， 背 景 颜色 为 浅 灰 色 ， 并 加 了 一 个 黑色 边框 。 此 时 在 <div> 元 素 中 的 <p> 元 素 ， 将 使 用 子 
选择 符 中 定义 的 样式 。 不 具有 子 选 择 符 所 定义 的 包含 关系 的 元 素 ， 无 法 使 用 子 选择 符 中 定义 的 
样式 。 代 码 运行 后 ， 页 面 的 显示 效果 如 图 12-5 所 示 。 


图 12-5 ”使 用 子 选择 符 后 的 显示 效果 
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12.1.6 ”选择 符 分 组 


使 用 选择 符 分 组 的 方法 ， 可 以 一 次 性 定义 几 个 选择 符 中 的 样式 。 其 语法 结构 如 下 所 示 。 
选择 符 1, 选 择 符 2 


在 使 用 选择 符 分 组 的 时 候 ， 每 个 选择 符 之 间 ， 使 用 英文 的 逗号 分 隔 。 下 面 是 一 个 使 用 选择 
符 分 组 的 示例 ， 其 代码 如 下 所 示 。 


Wea example.html 


01 <htm> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 

05 <style> 

06 divphl 


width:300px; 

height: 100px: 
background:#ccceee: 
border:4px solid #009933; 


b 
07 </style> 
08 </head> 


09 <body> 
<div> 这 里 是 一 个 独立 的 div 元 素 </div> 
<p> 这 里 是 独立 的 p 元 素 </p> 
<hl> 这 里 是 独立 的 hl 元 素 </h1> 
10 </body> 
11 <html> 
以 上 的 代码 中 ，06 行使 用 选择 符 分 组 的 
方法 , 统一 定义 了 <p> 元 素 、<div> 元 素 、 <hl> ”| SECE nO 
元 素 的 宽度 属性 值 为 300px， 高 度 属性 值 为 
100px， 背 景 颜色 为 浅 灰 色 ， 并 有 一 个 绿色 的 
边框 。 代 码 运行 后 ， 页 面 的 显示 效果 如 图 12-6 
所 示 。 
使 用 选择 符 分 组 的 方法 , 可 以 方便 地 一 次 
性 定义 几 个 选择 符 中 相同 得 属性 , 提高 了 CSS 
样式 的 定义 的 效率 。 


这 里 是 独立 的 hl 元 素 
12.1.7 ”选择 符 的 优先 级 


在 各 种 选择 符 中 ，id 选择 符 的 优先 级 最 后 时 大 夯 王 夯 夯 呈 FBRE 冯 
高 ， 然 后 是 类 选择 符 ， 最 后 是 类 型 选择 符 。 而 。 图 12-6 “使 用 选择 符 分 组 定义 CSS 属性 后 的 显示 效果 
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伪 类 选择 符 必 须 定义 在 相应 的 选择 符 之 后 ， 所 以 伪 类 选择 符 的 优先 级 和 伪 类 前 面 的 选择 符 


一 致 。 


下 面 是 一 个 关于 选择 符 优先 级 的 示例 ， 其 代码 如 下 所 示 。 
example.html 


01 


07 


} 
08 


12 
13 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<tile> 选 择 符 的 优先 级 </title> 

<style> 

Pp 


width:400px: 
height:100px: 
background:#cccccee: 


了 


width:300px; 
background:#666666: 


起 


width:300px: 
height:100px: 
background-#999999; 
border:4px solid #009933; 


</style> 

</head> 

<body> 

<p> 三 种 选择 符 的 优先 级 </p> 

<p class="p'"> 三 种 选择 符 的 优先 级 </p> 

<p class="p" id="p"> 三 种 选择 符 的 优先 级 </p> 
</body> 

</html> 


以 上 的 代码 中 ，06、07 和 08 行 分 别 定义 了 3 个 选择 符 。 在 类 型 选择 符 p 中 ， 定 义 宽度 属 
性 值 为 400px， 高 度 属性 值 为 100px， 背 景 颜色 为 浅 灰 色 。 在 类 选择 符 “p” 中 ， 定 义 宽度 属性 
为 300px， 背 景 颜色 为 深 灰 色 。 在 id 选择 符 “ 元 ”中 ， 定 义 宽度 属性 值 为 300px， 高 度 属性 值 
为 100px， 背 景 颜色 为 灰色 。 在 第 1 个 <p> 元 素 中 ， 未 定义 任何 属性 。 在 第 2 个 <p> 元 素 中 ， 定 
义 了 类 属性 值 为 “p”。 在 第 3 个 <p> 元 素 中 , 同时 定义 了 类 属性 值 为 “p”, id 属性 值 也 为 “p”。 
代码 运行 后 ， 页 面 的 显示 效果 如 图 12-7 所 示 。 
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当 连 择 符 的 忧 先 级 - Wi creseft Internet Explorer 

文件 四 ”编辑 下 查看 WW) 收 立 巡 工具 CD) 帮助) 

Om © OW| wm Wm DIE 

天 让 加 [EE]D: w hocments\l3\Uatitlet-T_ htal BEG 
三 种 选择 符 的 优先 级 -| 


12-7 选择 符 优先 级 的 显示 效果 


从 图 12-7 可 以 看 出 ， 当 同时 定义 类 型 选择 符 和 类 选择 符 时 ， 类 选择 符 中 定义 的 属性 会 覆 
盖 类 型 选择 符 中 定义 的 相同 的 属性 。 在 同时 使 用 id 选择 符 和 类 选择 符 的 时 候 , id 选择 符 中 定义 
的 属性 会 覆盖 类 选择 符 中 定义 的 相同 的 属性 。 没 有 被 覆盖 的 属性 会 依然 作用 在 元 素 上 。 


“| 属性 


在 CSS 中 ， 属 性 是 控制 各 种 页 面 效 果 的 核心 。 所 有 页 面 效果 的 实现 都 要 通过 定义 相应 的 
属性 来 定义 。 在 每 个 属性 中 ， 定 义 的 值 可 以 各 不 相同 ， 每 个 属性 值 都 有 固定 的 写法 。 全 面 地 掌 
握 各 种 CSS 属性 ， 可 以 更 方便 地 控制 页 面 的 表现 形式 。 

在 样式 表 中 ， 属 性 的 作用 和 元 素 中 属性 的 作用 基本 相同 ， 用 来 定义 元 素 (或 内 容 ) 的 显示 效 
果 ， 包 括 文本 属性 、 链 接 属 性 、 字 体 属性 等 很 多 内 容 。 

在 样式 表 中 ， 属 性 的 名 称 都 是 固定 的 。 关 于 样式 表 中 都 有 哪些 属性 ， 每 种 属性 的 显示 效果 
等 知识 ， 将 在 后 面 的 章节 中 详细 讲解 。 下 面 是 一 个 使 用 属性 的 实例 。 其 代码 如 下 所 示 。 


三 example.html 


01 <html> 
02 <head> 
03 ”<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
04 <title>CSS 的 属性 </title> 
05 <style> 
06 p{ 
font-size:26px; 
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color:#333333; 
background:#FFOOFF: 
border-Spx solid #000000:;} 
</style> 

</head> 


<body> 
<p > 这 里 就 用 了 几 个 CSS 的 属性 <p> 
<body> 
</html> 


在 该 实例 中 ，06 行 中 类 型 选择 符 p 中 的 “font-size”、“color” 等 就 是 样式 中 使 用 的 属性 。 
其 代码 运行 后 ， 显 示 效 果 如 图 12-8 所 示 。 


12-8 在 样式 表 中 使 用 属性 的 显示 效果 


92.3 时 


在 样式 表 中 ， 每 个 属性 都 有 相应 的 值 与 之 对 应 ， 值 用 来 确定 属性 的 最 终 效 果 。 在 属性 对 应 


的 值 中 ， 


有 一 些 是 通常 使 用 的 值 ， 如 长 度 值 、 颜 色 值 等 。 还 有 一 些 是 某 个 属性 所 特有 的 值 。 每 


种 取 值 的 具体 写法 ， 将 在 后 面 的 章节 中 作 详 细 讲解 。 下 面 是 一 个 使 用 值 的 实例 。 其 代码 如 下 


所 示 。 


example.html 


01 
02 
03 
04 
05 
06 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
<title>CSS 实例 页 面 </title> 


Color:#333333; 
background:#EFOOFF: 
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borderSpx solid #000000; 

07 </style> 

08 </head> 

09 <body> 

10 ”<p> 使 用 CSS 的 实例 <p> 

11 </body> 

12 <html> 

在 该 实例 中 ，06 行 中 类 型 选择 符 p 中 “font-size”、“color”“background”、“border” 
后 面 定义 的 26px、 冯 33333、 考 FOOFF、Spxsolid #000000 等 就 是 属性 相对 应 的 值 。 它 们 和 属 
性 一 起 作用 ， 其 代码 运行 后 ， 显 示 效 果 如 图 12-8 所 示 。 


12.3.1 颜色 值 


在 CSS 中 , 定义 颜色 的 方法 有 很 多 种 , 其 中 比较 常用 的 方法 有 使 用 颜色 名 称 和 使 用 十 六 进 
制 颜色 值 两 种 。 


1. 使 用 颜色 名 称 


使 用 颜色 名 称 可 以 定义 简单 的 颜色 效果 。 只 有 一 定数 量 的 颜色 名 称 可 以 被 浏览 器 支持 。 下 
面 是 一 个 使 用 颜色 名 称 来 定义 颜色 的 示例 ， 具 体 代 码 如 下 所 示 : 


Pp {colorred} 


该 样式 定义 了 段落 中 文本 颜色 为 红色 。 通常 主要 的 一 些 浏览 器 都 能 识别 的 颜色 名 称 和 中 文 
翻译 如 下 所 示 : 

Ted( 红 )、yellow( 黄 )、blue( 蓝 )、silver( 银 )、teal( 深 青 )、white( 白 )、navy( 深 蓝 )、olive( 橄 榄 )、 
purple( 紫 )、gray( 灰 )、green( 绿 )、lime( 浅 绿 )、maroon( 褐 )、aqua( 水 绿 )、black( 黑 )、fuchsia( 紫 红 ) 

2. 使 用 十 六 进 制 颜色 


使 用 十 六 进 制 颜色 可 以 设置 较为 复杂 的 颜色 ， 通 常 在 制作 网 页 的 时 候 ， 各 种 颜色 的 设置 都 
使 用 十 六 进 制 的 颜色 值 。 下 面 是 一 个 用 十 六 进 制 设置 颜色 的 示例 ， 其 具体 代码 如 下 所 示 : 


Pp {color-#ff6633;} 


在 使 用 十 六 进 制 颜色 时 一 定 要 在 颜色 值 前 加 “#”。 六 位 数字 中 ， 前 两 位 代表 红色 的 值 ， 
中 间 两 位 代表 绿色 的 值 , 最 后 两 位 代表 蓝 色 的 值 。 每 组 色 值 的 数字 越 大 则 代表 含有 的 成 分 越 多 。 
比如 #000000 代表 没有 任何 三 原色 即 为 黑色 。#HEEEEF 是 三 原色 均 为 最 大 值 也 就 是 白色 。 

因为 相同 的 颜色 在 不 同 的 操作 系统 或 者 浏览 器 上 可 能 会 显示 不 同 的 效果 , 而 有 一 些 颜色 在 
各 种 情况 下 都 能 显示 基本 相同 的 颜色 ， 这 些 样 色 就 被 称 为 网 络 安全 色 。 网 络 安全 色 ， 用 十 六 进 
制 表 示 ， 分 别 是 相应 的 红 、 绿 、 蓝 色 值 为 00、33、66、99、cc、 企 的 组 合 。 比 如 “#ff0000” 就 
是 一 种 网 络 安全 色 ， 也 就 是 颜色 名 称 中 的 “red”。 组 合 后 的 网 络 安全 色 有 216 种 。 在 前 面 的 例 
程 中 已 经 用 过 这 些 颜 色 值 ， 这 里 就 不 再 举 实例 了 。 
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CSS 的 语法 


12.3.2 ”长 度 值 


在 CSS 中 , 长 度 单位 分 为 绝对 长 度 单位 和 相对 长 度 单位 。 绝 对 长 度 单位 ， 是 指 在 各 种 环境 
中 都 使 用 相同 的 长 度 值 。 相 对 单位 是 指 : 根据 各 自 定义 的 标准 和 环境 的 不 同 ， 显 示 的 长 度 会 发 
生 改 变 。 下 面 进行 详细 讲解 。 

1. 绝对 长 度 单位 


绝对 长 度 单位 一 般 为 常用 的 各 种 长 度 单位 值 ， 具 体 包 括 in( 英 寸 )、cm( 厘 米 )、mm( 毫 米 )、 
pt( 磅 )、pc(pica)。 下 面 对 其 中 相对 不 常见 的 属性 值 进行 相应 的 说 明 。 

> pt( 磅 ): 标准 印刷 上 的 单位 。72 个 磅 的 长 度 为 一 英寸 。 

> pc(pica): 印刷 上 用 的 单位 。1pc 的 长 度 是 12 磅 。 

绝对 长 度 一 般 在 打印 文档 定义 的 样式 中 比较 常用 ， 在 网 页 的 设计 中 很 少 使 用 。 


2. 相对 长 度 单位 


相对 长 度 单位 是 网 页 中 常用 的 长 度 单位 值 ， 具 体 包括 em、ex、px。 下 面 进行 详细 讲解 。 

> em: 定义 文字 使 用 font-size 属性 定义 的 值 。 例 如 ， 在 font-size 属性 中 ， 定 义 文字 大 小 
为 12pt， 那 么 此 时 lem 就 是 12pt 的 长 度 。 

> ex: 定义 文字 使 用 字母 x 的 高 度 。 因 为 不 同 的 字体 中 x 的 高 度 是 不 同 的 ， 所 以 单位 ex 
的 实际 大 小 也 不 同 。 

> px( 像 素 ): 将 显示 器 分 成 非常 细小 的 方 格 ， 那 么 每 个 方 格 就 是 一 个 px。px 的 实际 显示 
大 小 要 受到 显示 器 分 辩 率 的 影响 。 显 示 器 的 分 辨 率 定义 了 显示 器 划分 像素 的 方式 。 例 
如 ， 将 浏览 器 划分 为 4 个 部 分 ， 则 1 像素 代表 浏览 器 1/4 的 大 小 。 如 果 将 浏览 器 分 为 9 
个 部 分 ， 那 么 1 像素 就 代表 浏览 器 1/9 的 大 小 。 


12.3.3 ”百分比 值 


百分比 值 是 指 : 通过 一 个 指定 的 标准 ， 定 义 需 要 显示 的 长 度 。 根 据 指定 的 标准 不 同 ， 最 终 
显示 的 长 度 会 有 所 区 别 。 百 分 比值 的 写法 如 下 所 示 。 

数字 % 

在 百分比 值 中 ， 数 字 的 取 值 可 正 可 负 。 例如， 定义 一 个 元 素 的 宽度 为 100px， 那 么 如 果 定 


义 其 中 所 包含 的 一 个 元 素 的 宽度 为 20%， 那 么 这 个 元 素 的 宽度 就 是 20 像素 。 下 面 是 一 个 使 用 
百分比 值 的 实例 。 其 代码 如 下 所 示 。 


Wl example.html 


01 <html> 

02 <head> 

03 ”<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
04 <title>CSS 实例 页 面 </title> 

05 <style> 
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06 div{ 
width:450px: 
height:200px; 
border:Spx solid #333333;} 
07 p{ 


S8383 


<p> 使 用 CSS 的 实例 </p> 
12 </div> 


13 </body> 
14 </html> 
该 实例 中 , 06 行使 用 长 度 值 定义 了 <div> 元 素 的 宽度 和 高 度 , 同时 07 行使 用 百分比 值 定义 

了 <p> 元 素 的 宽度 和 高 度 。 其 代码 运行 后 ， 显 示 效果 如 图 12-9 所 示 。 
文件 四、 编辑 四 查看 中 收藏 | 工具 四 各 助 中 [3 


Gm OO Pm Km OIE 


图 12-9 样式 表 中 使 用 百分比 值 的 显示 效果 


92.4 继承 值 


继承 值 是 指 : 在 CSS 中 当 在 某 个 元 素 中 定义 了 某 个 属性 值 ， 其 包含 的 各 种 元 素 都 会 使 用 
这 个 属性 值 。 不 是 所 有 的 CSS 属性 都 具有 继承 性 。 合 理 地 使 用 CSS 的 继承 性 ， 可 以 更 方便 地 
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NA: 
对 各 种 效果 进行 控制 。 
下 面 是 一 个 使 用 继承 性 的 实例 ， 其 代码 如 下 所 示 。 


|[ 例 程 12-11| example.html 
01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<title> 继 承 值 </title> 
05 <style> 


<body> 
<div class="main"> 这 里 直接 引用 样式 ， 显 示 的 是 直接 定义 颜色 的 部 分 
<div> 这 里 显示 的 是 继承 颜色 的 部 分 。</div></div> 

10 </body> 

11 </html> 


以 上 的 代码 中 ，06 行 首先 定义 了 类 属性 值 为 main 的 元 素 中 ， 文 本 的 颜色 为 砖 红 色 。 然 后 
在 元 素 及 其 内 部 的 <div> 元 素 中 定义 了 部 分 文本 内 容 。 人 12-10 所 示 。 


这 里 直接 引用 样式 ， 时 未 的 是 直接 定 久 电 色 的 部 分 
这 里 显示 的 是 继承 颜色 的 部 分 。 


12-10 ”继承 值 的 显示 效果 


从 图 12-10 可 以 看 出 代码 中 独立 使 用 的 <div> 元 素 中 的 内 容 在 页 面 中 也 为 砖 红 色 。 


92.5 | 默认 值 


默认 值 是 指 : 在 CSS 中 没有 定义 任何 值 的 时 候 ， 元 素 所 使 用 的 值 。 大 多 数 的 默认 值 都 是 
none 或 者 为 0， 部 分 属性 中 有 自身 特有 的 默认 值 ， 如 left、auto 等 。 但 是 在 不 同 的 浏览 器 中 某 
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些 属性 的 默认 值 会 有 变化 。 合 理 地 使 用 属性 的 默认 值 可 以 减少 很 多 的 代码 。 
下 面 是 一 个 使 用 默认 值 的 实例 ， 其 代码 如 下 所 示 。 


|[ 例 程 12-12 | css-valuepercent.html 


01 <html> 

02 <head> 

03 ”<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 默 认 值 </tide> 


<div> 这 是 一 个 使 用 默认 值 的 实例 。</div></div> 
11 </body> 
12 </html> 


以 上 的 代码 中 ，06 行 首先 定义 了 类 属性 值 为 main 的 元 素 的 宽度 为 400px， 高 度 为 200px。 


然后 定义 页 面 中 <div> 元 素 的 边框 为 2 像素 黑色 实 线 边框 。 在 内 部 的 <div> 元 素 中， 定义 了 部 分 
文本 内 容 。 代 码 运行 后 的 显示 效果 如 图 12-11 所 示 。 


12-11 默认 值 的 显示 效果 


CSS 的 语法 


从 图 12-11 可 以 看 出 ， 虽 然 在 内 部 的 <div> 元 素 中 未 定义 任何 宽度 属性 ， 但 是 此 时 <div> 元 
素 的 宽度 依然 和 主体 元 素 的 宽度 相同 。 这 是 因为 <div> 元 素 的 默认 值 为 auto( 即 随 着 主体 元 素 的 
宽度 的 变化 ， 自 动 缩放 显示 宽度 )， 所 以 此 时 子 元 素 会 以 宽度 100% 显 示 。 


了 2.6 | 块 元 素 和 内 联 元 素 


在 HTML 中 ， 页 面 元 素 可 以 分 为 两 类 。 一 类 是 块 元 素 ， 另 一 类 是 内 联 元 素 。 本 节 将 分 别 
讲解 它们 的 各 自 特点 ， 注 意 这 两 个 元 素 的 区 别 和 联系 。 


12.6.1 块 元 素 


块 元 素 是 指 那些 在 默认 的 情况 下 会 换行 显示 的 元 素 ， 如 <div> 元 素 、<p> 元 素 等 。 之 所 以 要 
将 元 素 区 分 为 块 元 素 ， 是 因为 在 样式 表 中 ， 有 部 分 属性 是 只 对 块 元 素 起 作用 的 。 下 面 是 一 个 使 
用 块 元 素 的 实例 。 其 代码 如 下 所 示 。 


example.html 
01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
04 ”<title> 使 用 块 元 素 </title> 
05 <style> 
06 div{ 
border:5px solid red:} 
07 pf{ 
borderSpx solid yellow:} 
</style> 
</head> 
<body> 
<div> 这 里 是 使 用 块 元 素 区 域 中 的 内 容 </div> 
块 元 素 区 域 以 外 的 内 容 
<p> 这 里 是 使 用 块 元 素 区 域 中 的 内 容 </p> 块 元 素 区 域 以 外 的 内 容 
11 </body> 
12 <html> 
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在 该 实例 中 , 为 了 使 块 元 素 显示 得 更 加 明显 , 06 和 07 行使 用 了 样式 表 定 义 的 元 素 的 边框 。 
其 代码 运行 后 ， 显 示 效果 如 图 12-12 所 示 。 
从 图 12-12 可 以 看 出 ， 块 元 素 在 默认 的 情况 下 ， 在 水 平方 向 上 不 允许 任何 元 素 与 其 同行 


显示 。 


多 | 
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12-12” 块 元 素 的 显示 效果 1 


12.6.2 ”内 联 元 素 


内 联 元 素 是 指 在 默认 的 情况 下 ， 显 示 方 式 类 似 于 文本 的 元 素 。 内 联 元 素 默认 情况 下 同行 显 
直到 总 体 的 宽度 大 于 父 元 素 的 宽度 时 ， 才 换行 显示 。 下 面 是 一 个 使 用 内 联 元 素 的 实例 。 其 


代码 如 


下 所 示 。 


|[ 例 程 12-14| example.html 


07 
08 


<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
<title> 内 联 元 素 </title> 

</head> 


<body> 

<strong> 这 是 一 个 使 用 内 联 元 素 的 示例 </strong> 

这 是 一 张 图 片 : 

<img sre="pic jpg" width="200" /> 

这 里 是 一 个 按钮 : 

<input type="button" value=" 下 一 步 "name="namel" /> 
<body> 

</html> 


在 代码 中 没有 定义 任何 的 样式 ， 整 个 程序 都 是 默认 显示 。 其 代码 运行 后 ， 
12-13 所 示 。 
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显示 效果 如 图 


CSS 的 语法 


当 内 联 元 素 - Microsoft Internet Erplorer 
文件 四 ”编辑 E) 查看 WD 收 语 ) | 工具 上 帮助 0 


¢ a SR 国 国 多 | 克 wex 2 


这 是 一 个 使 用 内 联 元 素 的 示例 这 是 一 张 图 片 ， 


这 里 是 一 个 技 钮 ， 三 三 尖 


园 国 于 于 于 EC 


12-13 ”内 联 元 素 的 显示 效果 


从 图 12-13 中 可 以 看 出 ， 因 为 第 一 句 话 过 长 ， 与 图 片 一 起 时 超过 了 页 面 宽度 ， 因 而 图 片 换 
行 显示 ， 而 图 片 、 第 三 句 话 和 按钮 没 超过 页 面 宽度 ， 在 默认 的 情况 下 ， 它 们 同行 显示 。 


2.7 | 应 用 样式 的 优先 级 


通过 前 面 的 学 习 ， 可 以 了 解 到 ， 在 页 面 中 使 用 CSS 的 方法 有 3 种 ， 分 别 为 在 元 素 中 直接 
定义 、 在 页 面 头 部 调用 样式 、 从 外 部 文件 调用 样式 。 在 这 3 种 使 用 CSS 样式 的 方法 中 ， 在 元 素 
中 直接 定义 CSS 的 优先 级 最 高 ， 其 次 是 在 页 面 头 部 调用 的 CSS， 最 后 是 从 外 部 文件 中 调用 的 
CSS 样式 。 

下 面 是 一 个 关于 应 用 样式 优先 级 的 实例 ， 其 HIML 页 面 中 的 代码 如 下 所 示 。 


强国 加 css-valuepercenthtml 


01 <html > 
02 <head> 
03 ”<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <link href="style/main.css" rel="stylesheet" type="text/css" /> 
06 <style> 
07 div 
{ 
background:#666666:; 
color:#fFFFE: 
k 
08 </style> 
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跟 我 学 HTML+CSS 


09 </head> 
10 <body> 
<div style="background:#000000:'> 这 是 关于 应 用 样式 优先 级 的 实例 </div> 
11 <body> 
12 <html> 


在 <linik> 元 素 中 ， 被 调用 页 面 main.css 中 的 代码 如 下 所 示 : 


backeround-:#ffEFFF 
Color:#333333; 
width:500px:; 
height: 100px: 
| 
在 以 上 的 代码 中 ， 使 用 元 素 中 定义 CSS 的 方法 ， 定 义 <div> 元 素 的 背景 颜色 为 黑色 。 在 头 
部 的 <style> 元 素 中 ， 定 义 背景 颜色 为 灰色 ,文本 颜色 为 白色 。 在 外 部 的 CSS 文件 中 ， 定 义 背景 
颜色 为 白色 , 文本 颜色 为 深 灰色 , 宽度 为 300px, 高 度 为 100px。 页 面 最 终 的 显示 效果 如 图 12-14 
所 示 。 


避 无 标题 文档 - Nicrosoft Internet Explorer =lolx 
文件 @) 编辑 人 @) 查看 Q) 收 疗 人) 工具 I) 和 助 0 EE 
Om -© Wm Funn Sus | ” 
十 直人 0 | 妈 ]0.\ 际 \cs: 书 懈 \03 意 文件 yoiuz hl 。 四 灯 到 | 加 smvart 司 可 
习 


图 12-14 3 种 方式 调用 样式 表 的 优先 级 


从 图 12-14 可 以 看 出 ， 页 面 最 终 在 定义 的 3 个 背景 颜色 中 ， 使 用 了 最 优先 的 元 素 内 部 定义 
的 颜色 。 文 本 的 颜色 使 用 页 面 头 部 样式 中 定义 的 颜色 。 而 宽度 和 高 度 则 使 用 外 部 样式 中 定义 的 
大 小 。 在 3 种 使 用 样式 的 方法 中 ， 元 素 中 直接 使 用 样式 表 的 方法 的 优先 级 最 高 ， 然 后 是 从 页 面 
头 部 调用 的 样式 表 ， 最 后 是 从 外 部 调用 的 样式 表 。 下 面 是 一 个 在 元 素 中 使 用 不 同方 法 应 用 样式 
的 实例 。 其 代码 如 下 所 示 。 


wa css -important html 


01 <html> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=gb2312" /> 
04 ”<title> 无 标题 文档 </title> 

05 <linkhref="style.css" rel="stylesheet" type="text/css" /> 

06 <style> 
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12 
3 


3{ 

font-size:36px:} 

img{ 

border:20px solid #999999;} 

</style> 

</head> 

<body> 

<h3 style="font-size:24px:">CSS 演示 实例 </h3> 
<p style="font-size:36px;"> 给 图 片 加 了 边框 </p> 
<img sre="pic-jpg"/> 

</body> 

</html> 


调用 的 style.css 文件 中 的 代码 如 下 所 示 。 


其 代码 运行 后 ， 显 示 效 果 如 图 12-15 所 示 。 


borderSpx solid #000000:} 


EEEEEE 


CSS 演 示 实 例 
给 图 片 加 了 边框 


12-15 不 同方 法 应 用 样式 的 显示 效果 


从 图 12-15 可 以 看 出 ， 此 时 元 素 <h3> 和 <p> 中 ,字体 使 用 的 都 是 各 自 元 素 中 style 属性 中 直 
接 定义 的 字体 大 小 。<img> 元 素 优先 使 用 了 <style> 元 素 中 定义 的 边框 属性 。 
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92.8, 本 章 习 题 


"= 选择 题 

1. 各 类 选择 符 中 ， 优 先 级 最 高 的 是 (。 )。 

A.id 选择 符 B. 类 选择 符 C. 伪 类 D. 子 选择 符 

2. 以 长 度 单位 中 ， 属 于 绝对 长 度 的 是 (。 )。 

APpx B.ex Cem Dpt 

3 以 下 选项 中 不 能 用 来 表示 CSS 颜色 的 是 (。 )。 

A.red B.#FF0000 C. rgb(f, 0, 0) D. rgb(100%, 0.0) 

二 、 填 空 题 

1. 在 CSS 中 ， 选 择 符 的 种 类 很 多 ， 这 些 选 择 符 包括 : id 选择 符 、 、 类 型 选择 


符 、 等 。 每 种 选择 符 的 优先 级 也 不 同 ， 其 中 优先 级 最 高 。 


2. 继承 值 是 指 ， 在 CSS 中 当 在 某 个 元 素 中 定义 了 某 个 属性 值 ， 其 包含 的 各 种 元 素 都 会 使 


用 这 个 属性 值 。 所 以 使 用 继承 值 时 ， 必 须 先 定义 。 不 是 所 有 的 CSS 属性 都 具有 继承 


3， 长度 单 位 分 为 和 
三 、 实 战 练习 
编写 一 个 综合 应 用 各 类 选择 符 的 程序 ， 熟 悉 优先 级 的 意义 。 


ma 
CSS 控 制 又 本 的 显示 


CSS 中 ， 文 本 的 控制 包括 两 个 方面 的 内 容 ， 一 方面 控制 文本 中 字体 的 各 种 显示 效果 (如 控 
制 字体 的 大 小 等 ) 另 一 方面 控制 文本 的 显示 效果 (如 文本 的 缩 进 等 )。 在 CSS 中 文本 的 控制 是 很 
重要 的 内 容 ， 文 本 的 显示 效果 直接 影响 读者 对 页 面 信息 的 读 取 。 


全 、 本章 主 要 内 容 有 : 


@ 重点 掌握 CSS 控制 字体 的 显示 方法 并 能 熟练 应 用 
@ 了 解 CSS 控制 文本 的 显示 方法 及 其 使 用 方法 
@ 能 熟练 使 用 字体 综合 属性 


跟 我 学 HTML+CSS 


13.1 | 控制 字体 的 显示 


在 CSS 中 ， 字 体 的 控制 有 控制 文本 的 字体 、 字 体 的 大 小 、 字 体 的 样式 、 字 体 的 颜色 、 字 
体 的 修饰 等 方面 的 内 容 。 本 节 将 分 别 进行 详细 讲解 。 


13.1.1 字体 选择 属性 font-family 


字体 选择 属性 (font-family) 用 来 定义 文本 中 使 用 的 那 种 字体 。 字 体 选 择 属性 的 值 为 字体 名 
称 ， 其 语法 结构 如 下 所 示 。 


font-family : name; 


| 也 注意 

了 在 使 用 字体 选择 属性 的 时 候 ， 如 果 字 体 中 含有 空格 ， 或 者 使 用 的 是 中 文字 体 ， 要 

在 字体 上 使 用 引号 。 如 果 同 时 定义 了 几 种 字体 ， 则 每 种 字体 之 间 使 用 过 号 分 隔 。 最 先 
八 定义 的 字体 属性 值 会 优先 使 用 。 


下 面 是 一 个 使 用 字体 选择 属性 的 实例 ， 其 代码 如 下 所 示 。 


|[ 例 程 13-1| font-family.html 
01 <html > 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 字 体 的 选择 </title> 
05 <style> 
06 div 
{ 
font-family:" 隶 书 "" 黑 体 ": 
width:350px:; 
height: 120px: 
background:yellow: 


07 Pp 
font-family:Arial, Helvetica, sans-senf 
width:300px: 


height: 120px; 
background:#999999; 
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11 <div> 这 是 使 用 中 文字 体 的 元 素 </div> 
<p>how do you do!</p> 

12 </body> 

13 </html> 

以 上 的 代码 中 , 06 行 定义 <div> 元 素 的 字体 属性 值 为 隶书 和 黑体 , 隶书 是 一 种 常见 的 字体 ， 
所 以 <div> 元 素 中 会 使 用 隶书 。07 行 在 <p> 元 素 中 , 定义 字体 属性 值 为 3 种 英文 字体 。 由 于 Arial 
是 常用 的 英文 字体 ， 一 般 电脑 中 都 会 安装 ， 所 以 在 <p> 元 素 中 ， 最 终 会 使 用 Arial 字体 。 其 显示 
效果 如 图 13-1 所 示 。 


13-1 字体 属性 的 显示 效果 


13.1.2 ”字体 颜色 属性 color 


字体 颜色 属性 用 来 定义 字体 使 用 的 颜色 。 在 定义 字体 颜色 的 时 候 ， 要 注意 字体 颜色 和 背景 
之 间 的 对 比 ， 方 便 读者 的 阅读 。 
下 面 是 一 个 使 用 字体 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


Ws example.html 


<html > 

<head> 

<meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
<title>css 属性 实例 </title> 

05 <style> 

06 div 

| 


RRS 


<div> 注 意 字体 颜色 不 要 和 背景 颜色 太 接 近 </div> 
<p> 使 用 默认 背景 <p> 

11 </body> 

12 </html> 


以 上 的 代码 中 ，06 行 在 <div> 元 素 中， 定义 文本 的 颜色 为 深 灰 色 ， 背 景 颜 色 为 浅 灰 色 。07 
行 在 <p> 元 素 中 ， 定 义 文本 的 颜色 为 红色 ， 背 景 颜 色 默 认 。 因 为 显示 与 页 面 颜色 一 样 的 白色 ， 
这 样 p 元 素 中 定义 的 样式 就 无 法 看 到 。 以 上 代码 的 显示 效果 如 图 13-2 所 示 。 


ID| x| 


图 13-2 字体 颜色 的 显示 效果 
从 图 13-2 可 以 看 出 , 字体 的 颜色 和 背景 颜色 之 间 ， 要 存在 一 定 的 对 比 ， 才 能 够 更 好 的 阅读 。 


13.1.3 ”字体 大 小 属性 font-size 


字体 大 小 属性 (font-size) 用 来 控制 元 素 中 字体 的 显示 尺寸 。 在 字体 的 大 小 属性 中 , 可 以 使 用 
几 个 属性 值 ， 通 常 使 用 的 是 以 px 为 单位 的 长 度 值 ， 其 语法 结构 如 下 所 示 。 


font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length: 


其 中 各 个 属性 值 的 含义 ， 如 下 所 示 。 


> 
> 


Vvvyvyvyveyvyv 


用 


xx-small: 定义 文本 字体 为 最 小 。 
x-small， 定 义 文本 字体 为 较 小 。 
small， 定 义 文本 字体 为 小 。 
medium: 定义 文本 字体 为 正常 。 
large: 定义 文本 字体 为 大 。 

x-large: 定义 文本 字体 为 较 大 。 
xx-large: 定义 文本 字体 为 最 大 。 
larger: 相对 父 元 素 字体 增 大 。 
smaller: 相对 父 元 素 字体 减 小 。 
length: 把 字体 设置 为 一 个 固定 的 值 。 


注意 
在 以 上 的 属性 值 中 ，xx-small、x-small、small、medium、large、x-large、xx-large 


等 几 个 值 的 显示 效果 ， 与 定义 的 字体 有 关 。larger、smaller 属性 值 的 显示 效果 ， 与 父 


元 素 中 定义 的 字体 大 小 有 关 。 


下 面 是 一 个 使 用 字体 大 小 属性 的 实例 ， 其 代码 如 下 所 示 。 


example.html 


33 


3 


10 


12 


<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 字 体 大 小 </title> 
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<p class="p1"> 注 意 字体 的 大 小 </p> 
<p class="p2"> 注 意 字体 大 小 的 对 比 </p> 
<p class="p3"> 注 意 字体 的 大 小 </p> 
<p class="p4"> 注 意 字 体 大 小 的 对 比 </p> 
<p class="p5"> 注 意 字 体 的 大 小 </p> 
<p class="p6"> 注 意 字体 大 小 的 对 比 </p> 
<p class="p7"> 注 意 字体 的 大 小 </p> 
<div> 注 意 字体 大 小 的 对 比 
<p class=-"p8"> 注 意 字体 的 大 小 <p> 
<p class="p9"> 注 意 字体 大 小 的 对 比 <p></div> 
20 </body> 
21 </html> 


以 上 的 代码 中 , 在 9 个 <p> 元 素 中 , 分 别 定义 了 不 同 的 字体 大 小 属性 值 。 由 于 larger、 smaller 


属性 值 ， 与 父 元 素 中 定义 的 字体 大 小 有 关 ， 所 以 使 用 <div> 元 素 定义 了 父 元 素 。 以 上 代码 的 显 
示 效 果 如 图 13-3 所 示 。 


福地 人 人 内 9 上 
注意 宁 体 的 大 小 


注意 字体 大 小 的 对 比 
注意 字体 的 大 小 


注意 字体 大 小 的 对 比 

注意 字体 的 大 小 

注意 字体 大 小 的 对 比 

注意 字体 的 大 小 
注意 字体 大 小 的 对 比 


到 


[ll ll LZ 
图 13-3 字体 大 小 属性 的 显示 效果 


CSS 控制 文本 的 显示 


13.1.4 ”字体 样式 属性 font-style 


字体 样式 属性 (font-style) 用 来 定义 字体 的 显示 样式 。 在 字体 样式 属性 中 ， 可 以 使 用 几 个 属 
性 值 ， 包 括 norma、italic、oblique。 其 语法 结构 如 下 所 示 。 


font-style : normal | italic | oblique; 


其 中 各 个 属性 值 的 含义 如 下 所 示 。 
> normal: 定义 字体 正常 显示 。 

> italic: 定义 字体 使 用 斜体 。 

> oblique: 定义 字体 使 用 倾斜 字体 。 


a 
| 也 注意 
| 1/ 
及 斜体 属性 值 (italic) 用 来 定义 使 用 斜体 字 。 当 字体 没有 相关 的 斜体 字 时 ， 则 无 法 显 
示 斜 体 效 果 。 倾 斜 字体 (oblique) 用 来 定义 字体 的 倾 针 ， 所 有 字体 都 可 以 使 用 这 个 属性 
改定 义 倾 镍 效果。 斜体 字 与 倾 针 的 字体 ， 在 显示 效果 上 存在 着 一 定 的 差别 ， 


下 面 是 一 个 使 用 字体 样式 属性 的 实例 ， 其 代码 如 下 所 示 。 
example.html 


01 <html> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title>css 属性 实例 </title> 

05 <style> 

06 pl 


font-style:italic: 
font-size:48px:} 
07 p2 


font-style:normal:; 
font-size:48px:} 

08 p3 
{ 
font-style:oblique:; 
font-size:48px:} 

09 </style> 

10 </head> 

11 <body> 
<p class="pl"> 这 是 文本 内 容 <p> 
<p class="p2"> 这 是 文本 内 容 </p> 
<p class="p3"> 这 是 文本 内 容 </p> 

12 </body> 

13 </html> 


以 上 的 代码 中 ，06 行 ~08 行 分 别 定义 了 3 个 <p> 元 素 。 在 每 个 元 素 中 ， 同 时 定义 了 字体 的 
大 小 都 为 48px， 定 义 了 不 同 的 字体 样式 分 别 为 斜体 、 正 常 和 倾斜 ， 以 便 显示 效果 更 加 明显 。 以 
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上 代码 的 显示 效果 ， 如 图 13-4 所 示 。 


:ww 


上任 需 在 一 参 才 笨 
坚强 是 一 种 美德 
尾 需 在 一 参考 知 


13-4 “字体 样式 属性 的 显示 效果 


13.1.5 “字体 加 粗 属 性 font-weight 


字体 加 粗 属 性 (font-weighb 用 来 定义 字体 是 否 显示 加 粗 和 变 细 的 效果 。 在 字体 样式 属性 中 ， 
可 以 使 用 两 类 属性 值 , 一 类 是 用 名 称 命名 的 属性 值 , 如 blod 等 。 男 一 类 是 用 数字 命名 的 属性 值 ， 
如 200、300 等 。 其 语法 结构 如 下 所 示 。 

font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900:; 

其 中 各 个 属性 值 的 含义 如 下 所 示 。 

> normal: 定义 字体 正常 显示 。 

> bold: 定义 字体 为 粗 体 。 

> bloder: 以 normal 中 定义 的 字体 大 小 为 标准 ， 定 义 字体 比 nomal 中 字体 略 大 。 

> lighter: 以 normal 中 定义 的 字体 大 小 为 标准 ， 定 义 字体 比 normal 中 字体 略 小 。 

> 100-900: 由 100 至 900， 分 9 个 层次 定义 字体 的 大 小 。 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 


03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 <title>css 字体 </title> 
05 <style> 
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16 <body> 

<p dlass="p1"> 谦 受益 ， 满 招 损 </p> 
<p class="p2'> 谦 受益 ， 满 招 损 </p> 
<p class="p3"> 谦 受益 ， 满 招 损 </p> 
<p class="p4"> 谦 受益 ， 满 招 损 </p> 
<p dlass="p5"> 谦 受益 ， 满 招 损 </p> 
<p class="p6"> 谦 受益 ， 满 招 损 </p> 
<p class="p7"> 谦 受益 ， 满 招 损 </p> 
17 </body> 

18 </html> 


以 上 的 代码 中 ， 分 别 在 每 个 <p> 元 素 中 ， 定 义 
了 不 同 的 加 粗 属性 值 。 同 时 定义 元 素 中 字体 的 大 小 
为 18px， 以 便 字 体 的 加 粗 效果 能 够 显示 得 更 加 明 
显 。 注 意 使 用 bold、bloder 和 800 时 候 的 显示 效果 。 
以 上 代码 的 显示 效果 ， 如 图 13-5 所 示 。 

可 以 看 到 当 使 用 数字 加 粗 时 ， 数 字 值 要 足够 大 
才 有 效果 。 


13.1.6 “字体 修饰 属性 text-decoration 


字体 修饰 属性 (textrdecoration) 用 来 定义 字体 的 EGG 
修饰 效果 ， 如 下 划 线 等 。 在 字体 修饰 属性 中 ， 可 以 图 13-5 字体 加 粗 属性 的 显示 效果 
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使 用 5 个 属性 值 ， 分 别 是 none、underline、blink、overline 和 line-through。 其 语法 结构 如 下 所 示 。 


text-decoration : none | underline | blink | overline | line-through:; 


其 中 各 个 属性 值 的 含义 如 下 所 示 。 

> none: 字体 无 修饰 效果 。 

overline: 定义 字体 修饰 效果 为 上 划 线 。 
line-through: 定义 字体 修饰 效果 为 删除 线 。 
underline: 定义 字体 的 修饰 效果 为 下 划 线 。 


> 
> 
> 
> blink: 定义 字体 修饰 效果 为 闪烁 (IE 6.0 中 不 支持 此 效果 )。 


> 注意 
下 可 以 同时 给 菜 个 元 素 定 义 多 个 修饰 属性 。 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 


-Type" content="text/html; charset=utf-8" /> 


09 p4 
{ 
text-decoration:underline; 
} 
10 </style> 
11 </head> 
12 <body> 
<p class="pl"> 谦 受益 满 招 损 </p> 
<p class="p2"> 谦 受益 满 招 损 <p> 
<p class="p3"> 谦 受益 满 招 损 </p> 
<p class-"p4"> 谦 受益 满 招 损 </p> 
13 </body> 
14 </html> 


以 上 的 代码 中 ， 定 义 了 4 个 <p> 元 素 。 在 每 个 元 素 中 ， 分 别 定义 了 无 修饰 、 上 划 线 、 删 除 


线 和 下 划 线 。 以 上 代码 的 显示 效果 ， 如 图 13-6 所 示 。 


图 13-6 字体 修饰 属性 的 显示 效果 


13.1.7 ”字体 下 划 线 位 置 属性 text-underline-position 
字体 下 划 线 位 置 属性 (text-underline-position) 用 来 定义 下 划 线 的 位 置 。 在 字体 下 划 线 位 置 属 
性 中 ， 可 以 使 用 两 个 属性 值 ， 分 别 是 below 和 above。 其 语法 结构 如 下 所 示 。 
text-underline-position : below | above: 
其 中 各 个 属性 值 的 含义 如 下 所 示 。 


> above: 下 划 线 在 文本 的 上 面 。 
> below: 下 划 线 在 文本 的 下 面 。 


下 面 是 一 个 使 用 字体 下 划 线 位 置 属性 的 实例 ， 其 代码 如 下 所 示 。 
| 例 程 13-7| example.html 
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<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<tite> 下 划 线 的 位 置 </title> 

<style> 

pl 


置 


。 以 上 代码 的 显示 效果 ， 如 图 13-7 所 示 。 


二 
text-decoration:underline: 
站 
08 Pp 
{ 
font-size:50px; 
} 
09 </style> 
10 </head> 
11 <body> 
<p class="pl"> 吃 一 暂 长 一 智 <p> 
<p class="p2"> 吃 一 思 长 一 智 <p> 
12 </body> 
13 </html> 


以 上 的 代码 中 ， 定 义 了 2 个 <p> 元 素 。 在 每 个 元 素 中 ， 分 别 定义 了 下 划 线 在 上 和 下 两 个 位 


济 下 划 线 的 位 时 


图 13-7 字体 修饰 属性 的 显示 效果 


13.1.8 ”小 型 大 写字 母 属性 font-variant 


小 型 大 写字 母 属性 (font-variant) 用 来 定义 英文 中 是 否 显示 小 型 大 写字 母 的 效果 。 小 型 大 写 


字母 是 介 于 大 写字 母 和 小 写字 母 之 间 的 一 种 字母 显示 效果 。 在 小 型 大 写字 母 属性 中 ， 可 以 使 用 
两 个 属性 值 ， 分 别 是 normal 和 above。 其 语法 结构 如 下 所 示 。 
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font-variant : normal | small-caps: 
其 中 各 个 属性 值 的 含义 如 下 所 示 。 


> normal: 文本 显示 正常 效果 。 
> small-caps: 文本 以 小 型 大 写字 母 效果 显示 。 


六 在 使 用 小 型 大 写字 母 属性 的 时 候 ， 文 本 中 要 有 小 写字 母 才能 够 显示 出 效果 ， 否 则 
将 显示 大 写字 母 的 效果 . 因为 中 文中 没有 小 型 大 写字 母 的 概念 , 所 以 对 中 文 不 起 作用 。 


01 <html xmlns= "http:/www-w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title>css 属性 实例 </tide> 

05 <style> 

06 div 


以 上 的 代码 中 ，06 行 在 <div> 元 素 中 定义 文本 的 显示 效果 为 小 型 大 写字 母 。07 行 在 <p> 元 


素 中 ,定义 文本 为 普通 文本 。 同 时 定义 了 文本 的 大 小 为 48px， 目 的 是 使 字母 的 显示 效果 更 加 明 
显 。 以 上 代码 的 显示 效果 如 图 13-8 所 示 。 


(ED: wy Documents\lavUatitlet-e_htal 


HOW ARE YOUI! 


How are you! 


图 13-8 ”小 型 大 写字 母 属性 的 显示 效果 


13.1.9 ”转换 大 小 写 属性 text-transform 


转换 大 小 写 属性 (text-transform) 用 来 定义 英文 字母 大 小 写 之 间 转 换 的 效果 。 在 转换 大 小 写 
属性 中 ， 可 以 使 用 4 个 属性 值 ， 分 别 是 none、capitalize、uppercase 和 lowercase。 其 语法 结构 
如 下 所 示 。 


text-transform : none | capitalize | Uppercase | lowercase: 


其 中 各 个 属性 值 的 含义 如 下 所 示 。 
> none: 字母 显示 效果 不 发 生 转 换 。 
> capitalize: 文本 中 首 字母 大 写 。 
> uppercase: 字母 转换 为 大 写字 母 。 
> lowercase: 字母 转换 为 小 写字 母 。 
Bi 


”由 于 在 中 文中 无 大 小 写 的 问题 ， 所 以 转换 大 小 写 属性 对 中 文 文本 不 起 作用 。 


下 面 是 一 个 使 用 转换 大 小 写 属性 的 实例 ， 其 代码 如 下 所 示 。 


example.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tile> 转 换 大 小 写 属性 </tidle> 

05 <style> 


10 Pp 


CSS 控制 文本 的 显示 


11 </style> 

12 </head> 

13 <body> 
<p class="p1">How old are you!</p> 
<p class="p2">How old are you!</p> 
<p class="p3">How old are you!</p> 
<p class="p4">How old are you!</p> 


14 </body> 

15 </html> 

以 上 的 代码 中 ， 定 义 了 4 个 <p> 元 素 。 在 每 个 
元 素 中 ， 定 义 了 不 同 的 大 小 写 转换 值 。 第 1 个 <p> moze 人 | 
元 素 中 ， 定 义 了 首 字母 大 写 。 第 2 个 <p> 元 素 中 ， 8 和 | Ea 
定义 了 所 有 字母 小 写 第 3 个 <p> 元 素 中 , 定义 了 |How Old Are Youl 
所 有 字母 大 写 。 第 4 个 <p> 元 素 中 ， 定 义 了 字母 正 
常 显示 。 以 上 代码 的 显示 效果 如 图 13.9 所 示 。 how old are youl 


、 HOW OLD ARE YOUI 
13.1.10 “字母 间隔 属性 letter-spacing 
How old are you! 
字母 间隔 属性 (letter-spacing) 用 来 定义 字母 (或 ss 和 避 
中 文 文字 ) 之 间 的 间隔 大 小 。 在 字母 间隔 属性 中 , 可 人 
以 使 用 两 个 属性 值 ， 分 别 是 normal 和 length。 其 语 
法 结构 如 下 所 示 。 


letter-spacing : normal | length; 


tt 


| 户 注 意 


“在 字母 间隔 属性 中 ， 不 能 使 用 百分比 值 . 


下 面 是 一 个 使 用 字母 间隔 属性 的 实例 ， 其 代码 如 下 所 示 。 
example.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 <title> 字母 间隔 属性 </title> 
05 <style> 
06 .spacingl 
ut 
letter-spacing:4em:; 
margin:20px;} 
07 .spacing2 
{ 
]etter-spacing:20px:} 
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font-size:40px:} 
09 </style> 


<div class="spacing1"> 庆 祝 中 华人 民 共 和 国 60 周年 </div> 
<div> 庆 祝 中 华人 民 共 和 国 60 周年 </div> 
<p class="spacing2">How are you!</p> 
<p>How are you!</p> 
12 </body> 
13 </html> 


以 上 的 代码 中 的 第 1 个 <spacing> 元 素 中 , 定义 元 素 中 文本 的 间隔 属性 值 为 em, 同时 定义 
了 边界 属性 ， 用 来 分 隔 下 面相 邻 的 元 素 。 第 2 个 <spacing> 元 素 中 ， 只 定义 了 文本 字体 的 大 小 ， 


用 来 和 第 一 个 <spacing> 元 素 中 的 内 容 作对 照 。<p> 和 <div> 元 素 中 定义 文本 的 间隔 属性 值 为 
40px， 用 来 做 对 照 。 以 上 代码 的 显示 效果 如 图 13-10 所 示 。 


庆祝 中 华人 民 共和 国 60 周 年 


How are youl 


How are you! 


13-10 文本 的 间隔 属性 的 显示 效果 


13.1.11 单词 间隔 属性 word-spacing 


单词 间隔 属性 (word-spacing) 用 来 定义 英文 单词 之 间 的 间隔 。 在 单词 间隔 属性 中 ， 可 以 使 用 
两 个 属性 值 ， 分 别 是 normal 和 length。 其 语法 结构 如 下 所 示 。 


word-spacing : normal | length; 


注意 
J 


”由 于 在 中 文中 没有 单词 这 个 语言 单位 ， 所 以 单词 间隔 属性 对 中 文 文本 不 起 作用 。 


| 
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CSS 控制 文本 的 显示 


下 面 是 一 个 使 用 单词 问 隔 属 性 的 实例 ， 其 代码 如 下 所 示 。 
example.html 


01 


07 


11 


12 
13 


以 上 的 代码 中 ，06 和 07 行 分 别 在 第 1 Eremszsneoe yr FF 
个 和 第 2 个 <spacing> 元 素 中 ， 定 义 了 单词 间 
了 属性 值 。 同 时 08 行 定义 了 <div> 元 素 和 <p> [| Ar 二 
元 素 作为 显示 效果 的 参照。 以 上 代码 运行 后 | 这 个 属性 对 中 文 是 无 用 的 
可 以 看 到 中 文 的 显示 不 受 任何 影响 ， 而 英文 “| 这 个 属性 对 中 文 无 用 
各 个 单词 之 间 间 开 了 一 定 的 距离 。 运 行 的 显 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=—utf-8" /> 
<title> 单 词 间隔 属性 </title> 

<style> 

.spacingl 

{ 

word-spacing:Sem; 

margin:0 0 20px 0: 

} 

-Spacing2 

word-spacing:30px: 

} 

divp 

上 

font-size:45px; 

} 

</style> 

</head> 

<body> 

<div class="spacing1"> 这 个 属性 对 中 文 是 无 用 的 </div> 
<div> 这 个 属性 对 中 文 无 用 </div> 

<p class="spacing2">How are you!</p> 
<p>How are you!</p> 

</body> 

</html> 


文件 四 ET 


回避- 日 -四 习 的 


万 加 次 wax | 


EE 


7 


WE Ey Yees 


How are vyoul! 


示 效 果 如 图 13-11 所 示 。 


How are you! 


13.1.12 行 高 属性 line-height 


行 高 属性 (line-height) 用 来 定义 文本 中 行 | 四 
高 的 大 小 。 在 行 高 属性 中 ， 可 以 使 用 3 个 属 = ll CE 


ioe.bel Ds we" 
四 


Sl 


图 13-11 单词 间隔 属性 的 显示 效果 
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性 值 ， 分 别 是 normal、length 和 percent。 其 语法 结构 如 下 所 示 。 
Line-height : normal | length | percent; 


六 


注意 
在 行 高 属性 中 ， 使 用 百分比 值 ， 其 最 终 取 值 以 文本 中 字体 的 高 度 为 基准 。 


下 面 是 一 个 使 用 行 高 属性 的 实例 ， 其 代码 如 下 所 示 。 


example.html 


Ss838™ 


| 
了 到 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title>css 行 高 属性 </title> 


<div> 这 是 一 个 关于 行 高 属性 的 实例 ， 注 意 换行 后 文本 的 显示 效果 。</div> 
<p> 这 是 一 个 关于 行 高 属性 的 实例 ， 注 意 换行 后 文本 的 显示 效果 。</p> 


<Jbody> 
/html> 


以 上 的 代码 中 , 06 行 在 <div> 元 素 中 定义 行 高 为 正常 .07 行 在 <p> 元 素 中 定义 行 高 为 200%。 
同时 定义 了 元 素 的 大 小 ， 用 来 产生 换行 效果 。 定 义 了 元 素 的 字体 大 小 ， 用 来 使 效果 显示 得 更 加 
明确 。 以 上 代码 的 显示 效果 如 图 13-12 所 示 。 


这 是 一 个 关于 行 高 属性 的 实例 ， 注 
意 痪 行 后 文本 的 显示 效果 。 

这 是 一 个 关于 行 高 属性 的 实 
例 ， 注 意 换行 后 文本 的 显示 效 
果 。 


ee 
图 13-12 行 高 属性 的 显示 效果 


可 以 看 到 <p> 元 素 中 的 两 行 之 间 有 了 距离 。 


13.1.13 ”字体 综合 属性 font 

字体 综合 属性 (font) 用 来 统一 定义 字体 的 各 种 属性 值 。 在 字体 综合 属性 中 ， 可 以 使 用 以 上 
几 个 小 节 中 讲解 的 部 分 属性 。 其 语法 结构 如 下 所 示 。 

font : font-family font-style font-variant font-weight font-size line-height: 


在 字体 的 综合 属性 中 ， 每 个 属性 值 之 间 使 用 空格 分 隔 。 如 果 同 时 使 用 了 字体 大 小 属性 和 行 
高 属性 ， 要 使 用 “字体 大 小 / 行 高 ”的 格式 。 


Pg 

下 ”字体 的 综合 属性 中 ， 每 个 属性 之 间 是 并 列 的 关系 ， 交 换 部 分 属性 值 之 间 的 顺 库 ， 
并 不 影响 属性 的 显示 效果 ， 在 使 用 中 文字 体 的 时 候 ， 最 好 将 中 文字 体内 容 定义 在 属性 
值 的 最 后 面 ， 否 则 可 能 会 带 来 显示 上 的 问题 。 


下 面 是 一 个 使 用 字体 综合 属性 的 实例 ， 其 代码 如 下 所 示 。 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tite> 字体 综合 属性 </titde> 
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height100px: 
07 </style> 
08 </head> 
09 


<body> 
<p> 这 是 一 个 关于 字体 综合 属性 的 实例 ， 注 意 文本 的 显示 效果 。</p> 
10 </body> 
11 </html> 


以 上 的 代码 中 ，06 行 中 使 用 字体 综合 属性 统一 定义 了 元 素 中 字体 的 大 小 、 使 用 的 字体 、 
行 高 、 加 粗 、 样 式 等 属性 ， 同 时 定义 了 元 素 的 大 小 ， 以 便 显示 换行 的 效果 。 以 上 代码 的 显示 效 
果 如 图 13-13 所 示 。 


> | 站 捞 党 居 如 
地址 加 中 优 ] 0: Wiy Documents\14\Untitled-13. htal "| 固 轩 到 锋 接 >” 


这 是 一 个 关于 字体 综合 属性 
| 的 实例 ， 注 意 文本 的 显示 效 


13-13 ”字体 综合 属性 的 显示 效果 


43.2, 控制 文本 的 显示 


在 CSS 中 文本 的 控制 是 指控 制 文本 的 缩 进 、 对 齐 、 空 白 、 显 示 方向 等 内 容 。 在 实际 制作 
网 页 时 ， 文 本 的 控制 对 整个 页 面 的 排版 起 着 决定 性 的 作用 。 好 的 文本 效果 ， 不 但 美观 ， 更 加 便 
于 读者 的 阅读 。 下 面 进行 详细 讲解 。 


13.2.1 文本 缩 进 属性 text-indent 


文本 缩 进 属性 (text-indent) 用 来 定义 文本 段落 中 自首 的 缩 进 效果 。 在 文本 的 缩 进 属性 中 ,使 
用 的 属性 值 为 长 度 值 ， 其 语法 结构 如 下 所 示 。 


text-indent : length: 


CSS 控制 文本 的 显示 


| 也 注意 
了 | 使 用 文本 的 缩 进 属性 ， 只 对 元 素 中 的 段落 产生 影响 。 


下 面 是 一 个 使 用 文本 缩 进 属性 的 实例 ， 其 代码 如 下 所 示 。 
example.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 文 本 缩 进 属性 </title> 
05 <style> 
0%6p 
{ 
text-indent:3em; 
font-size:24px; 
width:400px; 
height: 100px:; 
bs 
07 </style> 
08 </head> 
09 4 
<p> 这 是 一 个 关于 文本 缩 进 属性 的 实例 ， 注 意 这 段 话 开始 部 分 的 显示 效果 。</p> 
<p> 这 是 一 个 关于 文本 缩 进 属性 的 实例 ， 注 意 这 段 话 开始 部 分 的 显示 效果 。</p> 
10 </body> 
11 <html> 


以 上 的 代码 中 , 06 行 在 <p> 元 素 中 定义 了 文本 


的 缩 进 属性 值 为 3em, 同时 定义 文本 内 容 中 字体 的 “EC 
大 小 为 24 像素 ， 元 素 的 宽度 为 400 像素 、 高 度 为 ”| Ox] Sa Cl | 
100 像素 以 便于 文本 内 容 的 显示 。 其 显示 效果 如 图 “| 本 hereeseeeees 一 汪 目 是 于 3 
es 这 是 一 个 关于 文本 缩 进 属 性 的 
13-14 所 示 。 实例 ， 注 意 这 段 话 开始 部 分 的 显示 效 
从 图 13-14 可 以 看 出 , 在 父 元 素 中 定义 了 文本 | 果 。 
的 缩 进 属性 , 以 后 各 个 子 元 素 中 将 继续 继承 这 个 缩 这 是 一 个 关于 文本 缩 进 属性 的 
进 属性 值 。 于 全 注意 这 段 话 开始 部 分 的 显示 效 
13.2.2 文本 空白 属性 white-space 上 
加 E22 Certer 4 


文本 空白 属性 (white-space) 用 来 把 文本 中 使 用 
空格 、 换 行 等 空白 元 素 的 内 容 显示 出 来 。 在 文本 的 
空白 属性 中 ， 可 以 使 用 3 个 属性 值 ， 分 别 是 normal、pre 和 nowrap， 其 语法 结构 如 下 所 示 。 


white-space : normal | pre | nowrap; 


图 13-14 文本 缩 进 属性 的 显示 效果 
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跟 我 学 HTML+CSS 


其 中 各 个 属性 值 的 含义 ， 如 下 所 示 。 

> normal: 定义 空白 内 容 ， 按 照 默认 的 方式 显示 。 

> pre: 定义 空白 内 容 ， 按 照 原 有 的 方式 显示 。 

> nowrap: 定义 内 容 同行 显示 。 

下 面 是 一 个 使 用 文本 空白 属性 的 实例 ， 其 代码 如 下 所 示 。 


waka example.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 文 本 空白 属性 </title> 
05 <style> 
06 pl 
: 
white-space:nowrap; 
} 
07 p2 
HH 
white-space:normal; 
} 
08 p3 
i 
white-space:pre; 
b 
09p 
相 
width:300px; 
border:2px solid #000000; 
padding:10px: 
} 
10 </style> 
11 </head> 
12 <body> 
<p class="p1"> 这 段 文本 内 中 ， 使 用 了 空格 和 换行 
等 内 容 ， 要 注意 他 们 在 页 面 中 的 显示 方式 </p> 
<p class="p2"> 这 段 文本 内 中 ， 使 用 了 空格 和 换行 
等 内 容 ， 要 注意 他 们 在 页 面 中 的 显示 方式 </p> 
<p class="p3"> 这 段 文本 内 中 ， 使 用 了 空格 和 换行 等 内 
容 ， 要 注意 他 们 在 页 面 中 的 显示 方式 <p> 
13 </body> 
14 </html> 


以 上 的 代码 中 ，06 到 08 行 在 3 个 <p> 元 素 中 分 别 定 义 了 不 同 的 文本 空白 属性 值 ， 同 时 09 


行 定义 了 <p> 元 素 的 宽度 、 边 框 、 补 白 等 属性 ， 目 的 是 使 显示 效果 更 加 明显 。 代 码 运行 后 的 显 
示 效 果 如 图 13-15 所 示 。 
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这 段 文本 内 中 ， 使 用 了 空格 和 换行 等 内 

容 ， 要 注意 他 们 在 页 面 中 的 显示 方式 

这 段 文本 内 中 ， 使 用 了 空格 。 和 换行 等 内 
容 ， 要 注意 他 们 在 页 面 中 的 显示 方式 


图 13-15 文本 空白 属性 的 显示 效果 


从 图 13-15 可 以 看 出 , 使 用 pre 和 nowrap 值 的 元 素 ， 当 内 容 宽度 超出 元 素 宽度 时 ， 都 会 强 
行 改变 元 素 的 显示 宽度 进行 换行 。 


13.2.3 ”文本 溢出 属性 text-overflow 


当 文本 内 容 超 出 元 素 大 小 的 时 候 , 就 要 用 到 文本 溢出 属性 (text-overflow) 来 定义 这 些 文本 的 
显示 效果 。 在 文本 溢出 属性 中 ， 可 以 使 用 两 个 属性 值 ， 分 别 是 clip 和 ellipsis。 其 语法 结构 如 下 
所 示 。 

text-overflow : clip | ellipsis; 


其 中 每 个 属性 值 的 含义 ， 如 下 所 示 。 

> clip: 裁减 但 不 显示 省 略 标记 。 

> ellipsis， 当 文本 溢出 时 ， 显 示 省 略 标记 。 
诊 注意 
下 只 有 当 元 素 中 使 用 了 overflow 属性 ， 并 且 文本 空白 属性 值 为 nowrap 的 时 候 ， 文 
本 的 溢出 属性 才能 够 显示 效果 . 


下 面 是 一 个 使 用 文本 溢出 属性 的 实例 ， 其 代码 如 下 所 示 。 
example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tile> 文 本 溢出 属性 </title> 

05 <style> 


) 
08 </style> 
09 <head> 
10 <body> 
<div> 这 是 一 个 关于 文本 溢出 属性 的 实例 ， 注 意 文本 中 最 后 部 分 的 显示 效果 。</div> 
<p> 这 是 一 个 关于 文本 溢出 属性 的 实例 ， 注 意 文本 中 最 后 部 分 的 显示 效果 </p> 
11 </body> 
12 </html> 


以 上 的 代码 中 ，06 行 在 <div> 元 素 中 定义 了 文本 溢出 属性 值 为 显示 省 略 标记 ， 同 时 定义 了 
溢出 内 容 显 示 效 果 为 隐藏 ， 文 本 显示 效果 为 同行 显示 。07 行 在 <p> 元 素 中 定义 文本 溢出 属性 值 
为 裁 前 。 代 码 运 : 和 后 且 黎 条 各 国 13-16 所 示 。 


这 是 一 个 关于 文本 溢出 
这 是 一 个 关于 文本 溢出 属 


图 13-16 文本 溢出 属性 的 显示 效果 


从 图 13-16 可 以 看 出 , 在 溢出 属性 中 使 用 隐藏 值 (hidden) 的 时 候 , 就 会 显示 文本 溢出 属性 中 


CSS 控制 文本 的 显示 
定义 的 省 略 效果 。 如 果 使 用 的 是 可 见 值 (visible)， 则 这 些 效果 将 不 会 被 显示 出 来 。 


13.2.4 ”水 平 对 齐 属 性 text-align 


水 平 对 齐 属性 (text-align) 用 来 定义 元 素 的 水 平 对 齐 效 果 。 在 水 平 对 齐 属 性 中 ， 可 以 使 用 4 
个 属性 值 , 分 别 定义 元 素 内 容 的 左 对 齐 、 居 中 对 齐 、 右 对 齐 和 两 边 对 齐 , 其 语法 结构 如 下 所 示 。 


text-align : left | right | center | justify: 


其 中 每 个 属性 的 含义 如 下 所 示 。 

> left: 定义 元 素 内 容 左 侧 对 齐 。 

> right: 定义 元 素 内 容 右 侧 对 齐 。 

> center 定义 元 素 内 容 居 中 对 齐 。 

> justify: 定义 元 素 内 容 两 边 对 齐 (目前 浏览 器 还 不 支持 该 属性 )。 
下 面 是 一 个 使 用 水 平 对 齐 属性 的 实例 ， 其 代码 如 下 所 示 。 


WakE A example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 水 平 对 齐 属性 </title> 
05 <style> 
06 p 
font-size:24px; 
width:400px: 
height:60px: 
border:4px solid red; 
} 
07 pl 
{ 
text-align:left: 
b 
08 p2 
1 
text-align:center 
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13 <body> 
<p class="pl"> 注 意 文本 的 对 齐 方式 <p> 
<p class="p2"> 注 意 文本 的 对 齐 方式 </p> 
<p class="p3"> 注 意 文本 的 对 齐 方 式 </p> 
<p class="p4"> 注 意 文本 的 对 齐 方 式 </p> 

14 </body> 

15 <html> 


以 上 的 代码 中 , 07 行 ~10 行 中 在 4 个 <p> 元 素 中 分 别 定义 了 不 同 的 水 平 对 齐 属 性 值 。 同 时 
06 行 中 定义 了 元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 目 的 是 更 好 地 显示 对 齐 的 效果 。 代 码 运行 后 ， 
其 显示 效果 如 图 13-17 所 示 。 


a | 个 
GO a | Dm Wr GD 


忠 娃 和 ]D; wy Docwments\14\Unti tled-17. htal 


注意 文本 的 对 齐 方式 
意 文本 的 对 齐 方式 


SE I 7 
13-17 ”定义 水 平 对 齐 属 性 后 的 显示 效果 


到 


13.2.5 “垂直 对 齐 属性 vertical-align 


垂直 对 齐 属 性 (vertical-align) 用 来 定义 元 素 的 垂直 对 齐 效果 。 在 垂直 对 齐 属性 中 ， 可 以 使 用 
10 个 属性 值 ， 其 语法 结构 如 下 所 示 。 


vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length:; 


其 中 每 个 属性 的 含义 如 下 所 示 。 

auto: 自动 对 齐 元 素 (和 1layout-flow 属性 值 有 关 )。 
baseline: 定义 内 容 与 基线 对 齐 。 

sub: 定义 元 素 内 容 与 上 标 对 齐 。 

super: 定义 元 素 内 容 与 下 标 对齐 。 

top: 定义 元 素 内 容 与 顶部 对 齐 。 

text-top: 定义 元 素 内 容 与 文本 顶部 对 齐 。 


Vvyvyvyvyv 
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> middle: 定义 元 素 内 容 居中 对 齐 。 

> bottom: 定义 元 素 内 容 与 底部 对 齐 。 

> text-bottom: 定义 元 素 内 容 与 文本 底部 对 齐 。 

> length: 使 用 长 度 值 (浏览 器 未 支持 该 属性 )。 
F 注意 
中 要 直 对 齐 属性 只 能 应 用 于 内 联 元 素 ， 在 块 元 素 中 使 用 委 直 对 齐 属性 将 无 法 发 挥 作 

用 。 在 使 用 委 直 布局 属性 布局 的 时 候 ， 和 要 十 分 注意 这 一 点 。 


下 面 是 一 个 使 用 垂直 对 齐 属性 的 实例 ， 其 代码 如 下 所 示 。 


01 <html xmlns="http:/www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 <title>css 属性 实例 </title> 


10 Jimg5 
11 img6 
12 img7 


13 jimg8 


} 
15 </style> 
16 </head> 


<body> 

<p> 这 是 图 像 内 容 <img class="imgl" src="images/greyscale 006.gif' alt="pic" /> 这 是 文本 内 容 。</p> 
<p> 这 是 图 像 内 容 <img class="img2" src="images/greyscale 006.gif' alt="pic" /> 这 是 文本 内 容 。</p> 
<p> 这 是 图 像 内容 <img class="img3" src="images/greyscale 006.gif' alt="pic" 上 这 是 文本 内 容 。</p> 
<p> 这 是 图 像 内 容 <img class="img4" src="images/greyscale 006.gif' alt="pic" > 这 是 文本 内 容 。</p> 
<p> 这 是 图 像 内 容 <img class="img5" src="images/greyscale_ 006.gif' alt="pic" /> 这 是 文本 内 容 。</p> 
<p> 这 是 图 像 内 容 <img class="img6" src="images/greyscale 006.gif' alt="pic" /> 这 是 文本 内 容 。</p> 
<p> 这 是 图 像 内 容 <img class="img7" src="images/greyscale 006.gif" alt="pic" /> 这 是 文本 内 容 。</p> 
<p> 这 是 图 像 内 容 <img class="img8" src="images/greyscale 006.gif" alt="pic" 请 这 是 文本 内 容 。</p> 
18 </body> 

19 </html> 


以 上 的 代码 中 ， 在 8 个 <img> 元 素 中 分 别 定义 了 不 同 的 垂直 对 齐 属 性 值 。 同 时 定义 了 元 素 
的 宽度 、 高度、 边框 等 属性 , 目的 是 更 好 地 显示 对 齐 的 效果 。 代码 运行 后 , 其 显示 效果 如 图 13-18 
所 示 。 


ee | 
[ 芭 是 图 像 内 容 一 这 是 文本 内 容 


经 是 图 像 骨 容 个 这 是 文本 内 容 。 
ee fens. 


取 是 文 
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13-18 ”垂直 对 齐 属性 的 显示 


CSS 控制 文本 的 显示 


从 图 13-18 可 以 看 出 ， 在 垂直 属性 的 各 个 属性 值 中 ， 部 分 属性 值 的 显示 效果 相同 。 


13.2.6 ”文本 流向 属性 layout-flow 

文本 流向 属性 (layout-flow) 用 来 定义 元 素 中 文本 流 的 显示 方式 。 在 文本 流向 属性 中 ， 可 以 
使 用 两 个 属性 值 horizontal 和 vertical-ideographic， 其 语法 结构 如 下 所 示 。 

layout-flow : horizontal | vertical-ideographic: 

其 中 每 个 属性 的 含义 如 下 所 示 。 

> horizontal: 文本 按照 从 左 至 右 ， 然 后 从 上 到 下 的 方式 显示 。 


> vertical-ideographic: 文本 按照 从 上 至 下 ， 然 后 从 右 到 左 的 方式 显示 。 
下 面 是 一 个 使 用 文本 方向 属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 13-19| example.html 


01 


07 


08 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 文 本 的 流向 属性 </title> 

<style> 

Pl 

layout-flow:horizontal: 

} 

.p2 

{ 

layout-flow:vertical-ideographic; 

} 

Pp 

font-size:24px: 

width:400px: 

height:120px: 

border:4px solid yellow: 

: 

</style> 

</head> 

<body> 

<p class="p1"> 这 是 一 个 显示 方向 属性 的 实例 ， 注 意 这 段 话 中 文本 的 流向 。</p> 
<p class="p2"> 这 是 一 本 显示 方向 属性 的 实例 ， 注 意 这 段 话 中 文本 的 流向 。</p> 
</body> 

</html> 


以 上 的 代码 中 ，06 和 07 行 中 在 两 个 <p> 元 素 中 分 别 定 义 了 不 同 的 文本 流向 属性 值 。 其 中 
第 1 个 <p> 元 素 中 ,定义 文本 从 左 至 右 显 示 。 第 2 个 <p> 元 素 中 ， 定义 文本 从 上 至 下 显示 。 同 时 
定义 了 元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 目 的 是 更 好 地 显示 文本 的 流向 和 位 置 。 代 码 运行 后 ， 
其 显示 效果 如 图 13-19 所 示 。 
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TE 
图 13-19 文本 流向 属性 的 显示 效果 


13.2.7 ”文本 方向 属性 direction 

文本 方向 属性 (direction) 用 来 定义 元 素 中 文本 的 显示 方向 。 在 文本 方向 属性 中 , 可 以 使 用 两 
个 属性 值 lr 和 tl， 其 语法 结构 如 下 所 示 。 

direction : ltr | tl; 

其 中 每 个 属性 的 含义 如 下 所 示 。 


> ltr: 文本 按照 从 左 至 右 的 方向 显示 。 
> 世 : 文本 按照 从 右 到 左 的 方向 显示 。 


De 


使 用 文本 方向 属性 只 能 改变 文本 的 显示 位 置 ， 并 不 能 改变 文本 内 容 的 流向 。 


下 面 是 一 个 使 用 文本 方向 属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 13-20| example.html 

<html xmlns="http:/www-w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 文 本 方向 属性 实例 </tidle> 

<style> 

Pp 

{ 


SRBSRRSS 


09 </style> 
10 </head> 


11 <body> 
<p class="p1"> 这 段 文 本 的 方向 是 从 左 向 右 显示 的 </p> 
<p class="p2"> 这 段 文 本 的 方向 是 从 右 向 左 显示 的 </p> 
12 </body> 
13 </html> 


以 上 的 代码 中 ，07 和 08 行 中 在 两 个 <p> 元 素 中 分 别 定义 了 不 同 的 文本 方向 属性 值 。 其 中 
第 1 个 <p> 元 素 中 ， 定 义 文本 从 左 至 右 显示 。 第 2 个 <p> 元 素 中 ， 定 义 文本 从 右 至 左 显 示 。 同 时 


06 行 中 定义 了 元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 目 的 是 更 好 地 显示 文本 的 方向 和 位 置 。 代 码 运 
行 后 ， 其 显示 效果 如 图 13-20 所 示 ， 注 意 换行 地 方 的 显示 形式 。 


这 上段 文本 的 方向 是 从 无 问 
右 显示 的 


这 段 文本 的 方向 是 从 右 问 
左 显示 的 


13-20 文本 方向 属性 的 显示 效果 


13.2.8 ”文本 排序 属性 unicode-bidi 


文本 排序 属性 (Unicode-bidi) 用 来 定义 文本 内 容 的 显示 顺序 。 在 文本 排序 属性 中 ， 可 以 使 用 
3 个 属性 值 ， 分 别 为 anomal、bidi-override 和 embed。 其 语法 结构 如 下 所 示 。 


跟 我 学 HTML+CSS 


Unicode-bidi : normal | bidi-override | embed 


其 中 每 个 属性 值 的 含义 如 下 所 示 。 

> nomal: 定义 文本 按照 默认 的 顺序 显示 。 

> bidiroverride: 定义 文本 按照 文本 方向 属性 中 定义 的 方向 显示 。 
> embed: 按照 文本 方向 属性 ， 在 对 象 内 部 进行 隐 式 重 排序 。 
下 面 是 一 个 使 用 文本 排序 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl example.html 
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01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 文 本 排序 属性 实例 </title> 
05 <style> 
06p 

{ 

width:450px: 

height:40px: 

border:2px solid #CCOOCC: 

} 
07 pl 

d 

direction:ltr: 

unicode-bidi:bidi-override; 

} 
08 p2 

{ 

direction:ltr: 

unicode-bidi-embed: 


09 p3 


direction:rtl; 
unicode-bidi:bidi-override; 
10 p4 
{ 
direction:rt]; 
unicode-bidi:embed: 
b 
11 </style> 
12 </head> 
13 <body> 
<p class="p1"> 注 意 这 个 文本 的 排序 方式 。</p> 
<p class="p2"> 注 意 这 个 文本 的 排序 方式 。</p> 
<p class="p3 必 注意 这 个 文本 的 排序 方式 。</p> 
<p class="p4"> 注 意 这 个 文本 的 排序 方式 。</p> 
14 </body> 
15 </html> 


以 上 的 代码 中 , 06 行 中 定义 了 元 素 的 宽 
度 、 高 度 、 边 框 等 属性 ， 目 的 是 更 好 地 显示 
文本 的 方向 和 位 置 .07 到 10 行 中 在 4 个 <p> 
元 素 中 ， 分 别 定义 了 不 同 的 文本 方向 属性 和 
文本 排序 属性 。 其 中 第 1 个 和 第 2 个 <p> 元 
素 中 ， 定 义 文本 方向 为 由 左 至 右 ， 并 定义 了 
不 同 的 文本 排序 属性 。 在 后 面 两 个 <p> 元 素 
中 ， 定 义 了 类 似 的 属性 ， 只 是 文本 方向 属性 
值 为 由 右 至 左 。 代 码 运行 后 ， 其 显示 效果 如 
图 13-21 所 示 。 


13.2.9 ”单词 换行 属性 word-break 


word-break : normal | break-all | keep-all; 


其 中 每 个 属性 值 的 含义 如 下 所 示 。 
> nomal: 定义 使 用 默认 的 换行 效果 。 


当 文 本 排序 尾 性 实例 - Wicrosoft Internet Expler 


CSS 控制 文本 的 显示 


EEC EC T 
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隆 可 这 不 文 不 的 排序 方式 。 | 
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。 注音 这 1 | 
BE CT me 4 


13-21 文本 排序 属性 的 显示 效果 


单词 换行 属性 (word-break) 用 来 定义 文本 中 能 否 在 单词 内 部 换行 显示 。 在 单词 换行 属性 中 ， 
可 以 使 用 3 个 属性 值 ， 分 别 为 nonmal、break-all、keep-all。 其 语法 结构 如 下 所 示 。 


> break-all: 定义 文本 中 可 以 在 单词 内 部 换行 显示 。 
> keep-all: 定义 文本 单词 或 者 文本 不 能 换行 显示 。 
下 面 是 一 个 使 用 单词 换行 属性 的 实例 ， 其 代码 如 下 所 示 。 


sk example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 


02 <head> 


03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 


04 ”<title>css 属性 实例 </title> 
05 <style> 
06 pl 


07 p2 


08 p3 
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border:2px solid #000000:; 
} 
10 </style> 
11 </head> 
12 <body> 
<p class="p1"> 这 是 一 个 关于 单词 换行 属性 的 实例 Howareyou。</p> 
<p class="p2"> 这 是 一 个 关于 单词 换行 属性 的 实例 Howareyou。</p> 
<p class="p3"> 这 是 一 个 关于 单词 换行 属性 的 实例 Howareyou。</p> 
13 </body> 
14 </html> 


以 上 的 代码 中 ，06 到 08 行 在 3 个 <p> 元 素 中 ， 分 别 定义 了 不 同 的 单词 换行 属性 值 。 其 中 


第 1 个 <p> 元 素 中 ,定义 单词 默认 换行 显示 。 第 2 个 <p> 元 素 中 ,定义 单词 可 以 从 内 部 断 开 换 行 
显示 。 第 3 个 <p> 元 素 中 ， 定 义 单词 不 能 换行 显示 。 代 码 运行 后 ， 其 显示 效果 如 图 13-22 所 示 。 


© ADs 当时 
| 辐 ] 0 陈刚 \ess 书 稿 \07 章 文件 werd-break htal 司 


13-22 单词 换行 属性 的 显示 效果 


13.2.10 文本 断 开 换 行 属性 word-wrap 


文本 断 开 换行 属性 (word-wrap) 用 来 定义 文本 在 容器 中 能 否 断 开 换 行 显示 。 在 文本 换行 属性 


中 ， 可 以 使 用 两 个 属性 值 ， 分 别 为 normal 和 break-word。 其 语法 结构 如 下 所 示 。 


word-wrap : normal | break-word: 

其 中 每 个 属性 值 的 含义 如 下 所 示 。 

> nomal: 定义 文本 同行 显示 。 

> break-word: 定义 文本 可 以 断 开 换行 显示 ， 同 时 人 允许 文本 可 以 在 单词 内 换行 显示 。 
下 面 是 一 个 使 用 文本 换行 属性 的 实例 ， 其 代码 如 下 所 示 。 


WE example.html 


12 
| 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=—utf-8" /> 
<title>css 属性 实例 </tile> 


<p class="p1">HowareyouHowareyouHowareyouHowareyouHowareyouHowareyouHowareyou。 </p> 
<p class="p2">HowareyouHowareyouHowareyouHowareyouHowareyouHowareyouHowareyou。 </p> 


</body> 
</html> 


以 上 的 代码 中 ，06 行 和 07 行 在 两 个 <p> 元 素 中 分 别 定义 了 不 同 的 断 开 换 行 属性 值 。 同 时 
在 元 素 中 使 用 了 一 个 比较 特殊 的 文本 内 容 ， 目 的 是 显示 断 开 的 效果 。 代 码 运行 后 ， 其 显示 效果 
如 图 13-23 所 示 。 


[HowareyouHowareyouHowareyouHowareyouH 
owareyouHowareyouHowareyoue 


[HowareyouHowareyouHowareyouHowareyouHowareyouHowareyouHowareyoue 


| 
13-23 文本 断 开 换行 属性 的 显示 效果 
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.及 Es 


以 上 的 实例 中 ,使 用 了 特殊 的 文本 内 容 。 如 果 使 用 普通 的 文本 内 容 ， 换 行 和 断 
开 的 效果 将 会 以 不 同 的 方式 显示 。 


下 面 将 以 上 实例 中 使 用 的 特殊 文本 内 容 换 成 较为 普通 的 文本 内 容 。 使 用 相同 的 CSS 样式 ， 


址 四 ) T ] 8 snaat 国 过 

| Eow are you How are you How are you How 

lare you How are you How are you 

| How are you How are you How are you How 

| lere you How are you How are you 

| 

[BE: FF 证  ， 
图 13-24 使 用 普通 文本 的 断 开 换行 效果 


53.3 本 章 习题 


一 、 选 择 题 


1. 若 要 以 加 粗 宋 体 、12 号 字 显 示 “vbscript”， 以 下 用 法 中 ， 正 确 的 是 ( 。 )。 
A.<b><font size=12>vbscript</b></font> 

B.<b><font face=“ 宋 体 ”size=12>vbscript</font></b> 

C.<b><font size=“ 宋 体 ”size=12>vbscript</b></font> 

D .<b><font size=“ 宋 体 ”fontsize=12>vbscript</b></font> 

2. 以 下 关于 FONT 标记 符 的 说 法 中 ， 错 误 的 是 : ( 。 )。 

A. 可 以 使 用 color 属性 指定 文字 颜色 。 

B. 可 以 使 用 size 属性 指定 文字 大 小 (也 就 是 字号 )。 

C. 指定 字号 时 可 以 使 用 1~7 的 数字 。 

D. 语句 <FONT size="+2"> 这 里 是 2 号 字 </FONT> 将 使 文字 以 2 号 字 显 示 。 
3. 以 下 有 关 样 式 表 项 的 定义 中 ， 正 确 的 是 : ( )。 

A. Hl {font-family: 楷 体 gb2312., text-aligh:center} 
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B. Hl {font-family-= 楷 体 gb2312. text-aligh=center} 
C. Hl {font-family: 楷 体 gb2312; text-aligh:center} 
D. Hl {font-family= 楷 体 gb2312: text-aligh=center} 
4. 以 下 有 关 样 式 表 项 的 定义 中 ， 正 确 的 是 : (。 )。 
A. P{font-size=24px, text-aligh=center} 
B. P{font-size:24px, text-aligh:center} 
C.P{font-size=24px; text-aligh=center} 
D. P{font-size: 24px: text-aligh:center} 
5， letter-spacing 表示 的 意思 是 ( 。 )。 
A. 单词 间隔 属性 ”B. 字母 间隔 属性 C. 字体 修饰 属性 D. 字母 间隔 属性 
6. 字体 (fonb 样 式 的 属性 不 包括 ( 。 )。 
A.font-family B.font-style CC.font-weight D. font-Italic 


二 、 填 空 题 

1. 在 CSS 中 ， 字 体 的 控制 包括 控制 文本 的 、 字 体 的 大 小 、 、 字 体 
的 颜色 、 等 方面 的 内 容 。 

2. 字体 样式 属性 (font-style) 用 来 定义 字体 的 显示 样式 。 在 字体 样式 属性 中 ， 可 以 使 用 的 属 
性 值 包 括 和 ， 分 别 表示 N 5 

3. 文本 空白 属性 (text-overflow) 可 以 使 用 3 个 属性 值 ， 分 别 为 S 

三 、 实 战 练习 


制作 一 个 加 入 CSS 样式 的 页 面 ， 应 用 各 种 字体 属性 对 页 面 文 字 进 行 处 理 。 


yt 
CSS 摊 制 下 表 元 素 的 


显示 


在 网 页 中 ， 列 表 元 素 通常 用 来 定义 导航 ， 或 者 文章 标题 列表 等 内 容 。 在 CSS 中 ， 可 以 通 
过 相应 的 属性 控制 列表 元 素 的 各 种 显示 效果 。 在 本 章 中 , 将 对 CSS 中 控制 列表 元 素 的 显示 和 列 
表 元 素 的 使 用 与 嵌 套 做 详细 的 讲解 ， 学 习 的 时 候 可 通过 对 照 前 面 所 学 知识 来 加 深 对 本 章 的 理 
解 。 


NS 


全 、 本 章 主 要 内 容 有 : 


@ 重点 掌握 CSS 控制 列表 元 素 的 使 用 方法 。 
熟悉 列表 元 素 的 各 种 属性 。 
@ ”学 会 使 用 堪 套 的 列表 。 


跟 我 学 HTML+CSS 


14.1 | 控制 列表 元 素 的 显示 


在 CSS 中 ， 列 表 元 素 的 控制 包括 控制 列表 符号 、 列 表 图 像 、 列 表 位 置 等 几 个 方面 的 内 容 。 
通过 定义 各 种 属性 可 以 更 改 列表 的 默认 显示 方式 ,但 是 想 要 完全 控制 列表 元 素 的 显示 ， 还 需要 
依赖 其 他 的 CSS 属性 。 下 面 将 一 一 进行 详细 讲解 。 


14.1.1 列表 符号 属性 list-style-type 


列表 符号 属性 (list-style-type) 用 来 定义 列表 中 使 用 的 预 设 符号 。 其 中 使 用 的 属性 值 有 很 多 ， 
部 分 属性 值 还 不 被 浏览 器 所 支持 。 其 语法 结构 如 下 所 示 。 

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | 
armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | 
lower-latin | upper-latin; 

其 中 部 分 属性 值 的 含义 如 下 所 示 。 

> disc: 实心 圆 点 。 

> circle: 空心 圆圈 。 

> square: 实心 方块 。 
decimal: 阿拉 伯 数 字 。 
lower-roman: 小 写 罗 马 数字 。 
upper-roman: 大 写 罗马 数字 。 
lower-alpha: 小 写 英文 字母 。 
> upper-alpha: 大 写 英文 字母 。 
> none: 不 使 用 任何 符号 。 


在 以 上 讲解 的 几 个 属性 值 以 外 的 属性 值 ， 还 不 被 大 多 数 浏览 器 所 支持 。 


下 面 是 一 个 使 用 列表 符号 属性 的 实例 ， 其 代码 如 下 所 示 。 
example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 <title> 列表 符号 属性 </title> 
05 <style> 
06 liststylel 
上 
list-style-type:disc:} 


302 
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<li class="liststylel"> 实 心 圆 点 </i> 

<li class="liststyle2'> 空 心 圆圈 </li> 
<liclass="liststyle3 吃 实心 方块 <li></ul> 
<ul class="liststyle4"> 

< 阿拉 伯 数 字 </li> 

<I 记 阿拉 伯 数 字 </li><hl> 

<ul class="liststyle5"> 

<l 记 小 写 罗马 字 </i> 


24 <ulclass="liststyle8"> 
<Li> 大 写 英文 字母 <1i> 
<1i> 大 写 英文 字母 -1i><ul> 

25 <ul class="liststyle9"> 
< 不 用 任何 符号 </li></ul> 


26 </body> 
27 <html> 
以 上 的 代码 中 ，06 行 一 15 行 中 分 别 定 义 了 9 种 使 用 不 同 列表 符号 属性 值 的 样式 。 其 中 ， 
由 于 某 些 属性 值 会 涉及 到 编号 的 问题 ， 所 以 使 用 了 两 个 <li> 元 素来 显示 。 代 码 运行 后 的 显示 效 
果 如 图 14-1 所 示 。 


。 实心 图 点 
o 空心 图 图 
。 实心 方块 


于 小 写 罗马 字 


I 大 写 罗马 字 
工 大 写 罗马 字 


a 小 写 英文 字母 
b， 小 写 英文 字母 


A 大 写 英文 字母 
B， 大 写 英文 字母 


不 用 任何 符号 


图 14-1 列表 符号 属性 的 显示 效果 


14.1.2 ”列表 符号 的 混用 


在 定义 列表 元 素 的 时 候 ， 有 时 候 会 混用 各 种 列表 符号 。 当 混用 的 列表 符号 中 包含 顺序 问题 
的 时 候 ， 同 一 列表 中 将 会 计算 所 有 列表 项 目的 数目 ， 确 定 当前 列表 项 目的 显示 方式 。 
下 面 是 一 个 混用 列表 符号 的 实例 ， 其 代码 如 下 所 示 。 


Wb Ey example .html 
01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tile> 列 表 符号 的 混用 </tidle> 
05 <style> 
06 liststylel 
list-style-type:dise; 
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14 
15 


以 上 的 代码 中 ， 定 义 不 同 了 的 列表 元 素 
属性 ， 同 时 定义 了 <li> 元 素 中 文本 的 大 小 ， 
目的 是 更 好 地 显示 列表 项 目的 效果 。 以 上 代 
码 的 显示 效果 ， 如 图 14-2 所 示 。 


<li class="liststyle1"> 注 意 显 示 的 列表 项 目 </li> 

<li class="liststyle2"> 注 意 显 示 的 列表 项 目 </li> 

<li class="liststyle3"> 注 意 显 示 的 列表 项 目 </li> 

<li class="liststyle4"> 注 意 显 示 的 列表 项 目 </li></ul> 
</body> 

</html> 


。 注意 显示 的 列表 项 目 


从 图 14-2 可 以 看 出 ， 在 混用 的 列表 中 ， 。 注 意 显示 的 列表 项 目 
虽然 第 一 次 使 用 大 写 英文 字母 属性 值 | 5 注意 显 东 的 列表 项目 


(decimal)， 但 是 由 于 当前 文本 的 位 置 为 第 3 
个 ， 所 以 最 终 会 显示 大 写 英文 字母 C。 定 义 
其 他 列表 符号 ， 也 会 出 现 相同 的 效果 。 
14.1.3 ”列表 图 像 属性 list-style-image 
列表 图 像 属性 (list-style-image) 用 来 定义 


iv. 注意 显示 的 列表 项 目 


图 14-2 混用 列表 符号 的 显示 效果 


列表 元 素 中 替换 列表 符号 的 图 像 。 在 列表 图 
像 属性 中 ， 可 以 使 用 两 个 属性 值 : none 和 url， 其 语法 结构 如 下 所 示 。 


list-style-image : none | url; 


其 中 各 个 属性 值 的 含义 ， 如 下 所 示 。 

> none: 不 使 用 任何 列表 图 像 。 

> url: 定义 使 用 列表 图 像 的 路 径 。 

下 面 是 一 个 使 用 列表 图 像 属 性 的 实例 ， 其 代码 如 下 所 示 。 


example.html 


01 
02 
03 


8 8&8S 


10 
11 


以 上 的 代码 中 ，06 行 在 <li> 元 素 里 定义 了 列表 图 像 的 路 径 。 此 时 所 有 的 <li> 元 素 都 将 使 用 
定义 的 列表 图 像 。 以 上 代码 的 显示 效果 如 图 14-3 所 示 。 


蛋 列 表 图 像 屋 性 屈 性 实例 - Wieresoft Interseereolo[= EE:| 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 


<title> 列 表 图 像 属性 属性 实例 </title> 
<style> 


<1i> 使 用 列表 图 像 的 路 径 < 由 > 
<I 记 使 用 列表 图 像 的 路 径 </li> 
<l 记 使 用 列表 图 像 的 路 径 </li></ul> 
</body> 

</html> 


ep 
加 使 用 列表 图 像 的 路 径 
加 使 用 列表 图 像 的 路 径 


图 14-3 列表 图 像 属性 的 显示 效果 
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14.1.4 列表 图 像 的 显示 位 置 


在 列表 图 像 属性 中 ， 使 用 的 列表 图 像 的 显示 位 置 将 与 文本 的 底部 基线 对 齐 。 所 以 在 使 用 列 
表 图 像 的 时 候 ， 要 注意 选择 合适 的 图 像 大 小 ， 否 则 将 会 显示 异常 。 
下 面 是 一 个 显示 列表 图 像 位 置 的 实例 ， 其 代码 如 下 所 示 。 


example html 
01 <html xmlns="http://Wwww.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 列 表 图 像 属性 属性 实例 </title> 
05 <style> 
06 下 


<l 记 列表 图 像 和 字体 </li> 
<1i> 列 表 图 像 和 字体 <4i> 
<1i> 列 表 图 像 和 字体 <i><hl> 
10 </body> 
11 </html> 


以 上 的 代码 中 ，06 行 定义 了 一 个 较 大 的 列表 图 像 ， 同 时 定义 了 一 个 较 小 的 字体 大 小 。 以 
上 代码 的 显示 效果 如 图 14-4 所 示 。 


14-4 列表 图 像 位 置 的 显示 效果 


307 


跟 我 学 HTML+CSS 


14.1.5 ”标记 位 置 属性 list-style-position 


标记 位 置 属性 (list-style-position) 用 来 定义 列表 中 标记 的 显示 位 置 。 在 字体 样式 属性 中 ， 可 
以 使 用 两 个 属性 值 ，outside 和 inside。 其 语法 结构 如 下 所 示 。 


list-style-position : outside | inside; 


其 中 各 个 属性 值 的 含义 如 下 所 示 。 

> outside: 定义 列表 标记 显示 在 文本 之 外 。 

> inside: 定义 列表 标记 显示 在 文本 之 内 。 

下 面 是 一 个 使 用 标记 位 置 属性 的 实例 ， 其 代码 如 下 所 示 。 


example.html 
01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<title> 标记 位 置 属性 属性 实例 </title> 
05 <style> 
06 li{ 
list-style-type:square; 
font-size:24px; 
border:2px solid yellow 
y 
07 ll 
1 
list-style-position:inside; 
} 
08 .2 
i 
list-style-position:outside; 
} 
09 </style> 
10 </head> 
11 <body> 
<ul class="lil"> 
<I 记 这 是 一 个 使 用 标记 显示 在 文本 之 内 位 置 属性 的 实例 ， 注 意 换行 后 标记 的 显示 位 置 。</li> 
<ul> 
<ul class="li2"> 
<li> 这 是 一 个 使 用 标记 显示 在 文本 之 外 位 置 属性 的 实例 ， 注 意 换行 后 标记 的 显示 位 置 。<Ai> 
< 
12 </body> 
13 </html> 


以 上 的 代码 中 ，07 和 08 行 分 别 在 两 个 元 素 中 ， 定 义 了 不 同 的 标记 位 置 属性 值 。 同 时 定 


义 列表 符号 为 实心 方块 ， 字体 大 小 为 24px， 以 便 标记 位 置 属性 值 的 效果 能 够 更 加 明显 。 以 上 代 
码 的 显示 效果 ， 如 图 14-5 所 示 。 
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CSS 控制 列表 元 素 的 显示 


和 记 位 于 层 性 是 性 实 IE 
EC 下 3 
QO NAG wm BB “ 


WE [Er wy Docements\s Wnt eds henl 可 回 师 | 人 > 


ei 标记 显示 在 文本 之 内 位 


可 届 全 的 实例 。 注意 换行 后 标记 的 显示 


这 是 一 个 使 用 标记 显示 在 文本 之 外 位 置 
人 注意 换行 后 标记 的 显示 位 


Rl 


EE [a SY copter 


14-5 ”符号 位 置 属性 的 显示 效果 


从 图 14-5 可 以 看 出 ， 当 定义 的 标记 位 置 属性 值 为 inside 时 ， 当 换行 时 ,列表 标记 显示 在 文 
本 的 内 部 。 当 定义 的 标记 位 置 属性 值 为 outside 时 ， 当 换行 时 ， 列 表 标记 显示 在 文本 的 外 部 。 
同时 列表 标记 显示 在 列表 内 容 的 第 一 行 底部 。 


14.1.6 ”标记 位 置 属性 与 列表 高 度 


当 使 用 列表 标记 ， 同 时 定义 了 列表 高 度 时 ， 标 记 的 显示 位 置 、 列 表 高 度 和 标记 位 置 有 关 。 
列表 标记 会 显示 在 列表 定义 高 度 的 底部 ， 而 不 会 显示 在 列表 内 容 第 一 行 之 中 。 
下 面 是 一 个 标记 位 置 属性 与 列表 高 度 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 14-6 example.html 


07 


= 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title>css 属性 实例 </title> 

<style> 

lil 

list-style-position:inside; 

12 

{ 

list-style-position:outside: 

} 

li{ 

list-style-type:circle; 

height:70px; 

border2px solid #000000; 

font-size:24px:; 


</style> 
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10 </head> 


11 <body> 
<ul class="lil"> 


<li> 这 是 一 个 使 用 标记 位 置 属性 的 实例 ， 注 意 换行 后 标记 的 显示 位 置 。 
<1i> 这 是 一 个 使 用 标记 位 置 属性 的 实例 ， 注 意 换行 后 标记 的 显示 位 置 。 


<ul class="li2"> 


<> 
=< 


<li> 这 是 一 个 使 用 标记 位 置 属性 的 实例 ， 注 意 换行 后 标记 的 显示 位 置 。<Ai> 


<li> 这 是 一 个 使 用 标记 位 置 属性 的 实例 ， 注 意 换行 后 标记 的 显示 位 置 。 


12 </body> 

13 -</html> 

以 上 的 代码 中 ，06 行 和 07 行 在 两 个 元 
素 中 定义 了 不 同 的 标记 位 置 属性 值 。 同 时 08 
行 定义 了 内 容 的 高 度 、 边 框 的 大 小 、 字 体 大 小 
等 各 种 表现 属性 ， 目 的 是 使 列表 项 目的 显示 效 
果 更 加 明显 。 以 上 代码 运行 后 ， 可 以 看 到 实心 
方块 显示 在 框架 之 外 ， 但 是 所 在 的 位 置 不 同 。 
代码 运行 的 显示 效果 如 图 14-6 所 示 。 


14.1.7 ”列表 综合 属性 list-style 


列表 综合 属性 (ist-style) 用 来 统一 定义 列 
表 的 各 种 显示 效果 。 在 列表 综合 属性 中 ， 可 以 
同时 定义 列表 的 标记 位 置 、 使 用 图 片 、 列 表 符 
号 等 属性 。 其 语法 结构 如 下 所 示 。 


<><> 


加 和 奈 记 位 置 屋 性 与 列表 高 度 尾 性 实例 一 


文件 四。 久 回 四、 看 看 W) 收藏 全。 工具 GD) 帮 熏 吧 司 多 
(Bm.©O- HAND Nm ODS ” 
| WE [€] 5: wy poomenests Ha |tBE > 
这 是 一 个 使 用 两 个 标 E 的 实 
例 ， 注 意 换行 后 标记 的 显示 位 置 。 


SNatitLei-E htnl 


个 使 用 两 个 标记 位置 属性 的 


坟 各 
， 注 意 换行 后 标记 的 显示 位 置 。 


加 
同 才 [ 太 i 加 


图 14-6 标记 位 置 属性 与 列表 高 度 的 显示 效果 


[| [Sw cmew 


list-style : list-style-image || list-style-position || list-style-type: 


在 使 用 列表 综合 属性 的 时 候 ， 交 换 列表 各 种 属性 值 的 位 置 ， 并 不 影响 属性 的 显示 效果 。 


| 记 注 意 


ne “在 使 用 列表 综合 属性 的 时 候 ， 如 果 同时 定义 了 列表 的 图 片 属性 和 列表 符号 属性 


会 显示 列表 图 片 ， 


而 忽略 定义 的 列表 符号 。 


下 面 是 一 个 使 用 列表 综合 属性 的 实例 ， 其 代码 如 下 所 示 。 


LE example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 


03 <meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 


04 <title> 列 表 综合 属性 实例 </title> 
05 <style> 
06 下 
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list-style:-url(pic.jpg) inside disc: 
font-size:36px: 


</style> 

</head> 

<body> 

<u> 

<1i> 注 意 这 个 使 用 列表 综合 属性 的 实例 。<Ai> 
<1i> 注 意 这 个 使 用 列表 综合 属性 的 实例 。<Ai><Aul> 
10 </body> 

11 <htm> 


以 上 的 代码 中 ，06 行 定义 <li> 元 素 的 列表 综合 属性 值 中 ， 列 表 图 片 路 径 为 “urlpicjpg)”， 
同时 定义 了 文本 大 小 为 36px， 用 来 显示 换行 的 效果 。 以 上 代码 的 显示 效果 如 图 14-7 所 示 。 


28%3™ 


二 Er ED 0 Ee E27 


| 
Ose - 9- REEAP 灾 和 全 Cs 
1 列表 综合 属 


列表 综合 属 


下 
[BE | 到 全 ce EE 


图 14-7 列表 综合 属性 的 显示 效果 


4.2 | 列表 元 素 的 使 用 和 翌 套 


在 制作 页 面 的 时 候 ， 经 常会 使 用 列表 元 素来 制作 各 种 页 面 内 容 。 在 HTML 中 ， 列 表 元 素 
默认 会 包含 各 种 预先 定义 的 显示 效果 ， 这 些 显示 效果 在 不 同 的 浏览 器 中 使 用 的 属性 值 也 不 相 
同 。 所 以 在 使 用 CSS 控制 列表 元 素 的 时 候 ， 要 对 列表 元 素 的 显示 效果 有 所 了 解 。 同 时 使 用 嵌 套 
的 列表 元 素 可 以 制作 出 各 种 复杂 的 显示 效果 。 具 体内 容 如 下 所 示 。 


14.2.1 ”列表 元 素 的 默认 属性 值 


在 列表 元 素 中 ， 如 果 未 定义 任何 表现 属性 的 时 候 。 在 正 浏览 器 中 ， 会 为 列表 定义 默认 的 
边界 属性 。 在 Firefox 浏览 器 中 ， 会 为 列表 同时 定义 默认 的 补 白 和 边界 属性 。 
下 面 是 一 个 关于 列表 元 素 默认 显示 效果 的 实例 ， 其 代码 如 下 所 示 。 


311 


跟 我 学 HTML+CSS 


LE example.html 


07 


以 上 的 代码 中 ，06 行 在 <div> 元 素 中 定义 了 
边框 属性 。 同 时 07 行 在 列表 元 素 中 定义 了 列表 的 
标记 符号 、 列 表 的 图 像 等 属性 ， 并 定义 了 列表 的 
背景 ， 便 于 显示 列表 中 各 个 部 分 占有 的 空间 ， 以 
及 边界 等 的 显示 。 其 显示 效果 如 图 14-8 所 示 。 


14.2.2 ”统一 列表 元 素 的 边界 和 补 白 


通过 14.2.1 节 的 讲解 ， 可 以 知道 ， 造 成 列表 
元 素 显示 差异 的 主要 原因 是 : 存在 不 同 的 边界 和 
补 白 属性 值 。 所 以 可 以 通过 定义 边界 和 补 白 属性 ， 


<html xmlns="http:/vwww.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=—utf-8" /> 
<tile> 列 表 元 素 的 默认 属性 实例 </title> 

<style> 

div 

border:3px solid red: 

} 

uu 


list-style:url(pic.jpg) outside circle; 
background:blue; 
font-size:24px; 
b 
</style> 
</head> 
<body> 
<div> 
<u> 
<li> 这 里 使 用 了 列表 元 素 ， 注 意 这 人 句 话 的 显示 效果 。</li> 
<1i> 这 里 使 用 了 列表 元 素 ， 注 意 这 句 话 的 显示 效果 。<i></ul> 
</div> 
</body> 
</html> 


BE mp 


图 14-8 列表 元 素 在 正 浏览 器 中 的 显示 效果 


来 统一 列表 元 素 的 显示 差异 。 
下 面 是 一 个 统一 列表 元 素 显示 效果 的 实例 ， 其 代码 如 下 所 示 。 


WE sl example.html 
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<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div 
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border:4px solid #000000;} 
07 uu 
margin:0; 
padding:0; 
list-style:inside disc; 
background:yellow; 
font-size:30px:} 
08 </style> 
09 </head> 
0 <body> 
11 <div> 
<u> 
<> 列 表 元 素 显示 效果 的 实例 。</li> 
<] 访 列表 元 素 显示 效果 的 实例 。</li></ul> 
12 <div> 
13 </body> 
14 </html> 


以 上 的 代码 中 ，07 行 在 <ul> 元 素 中 分 别 定义 了 边界 和 补 白 属性 值 为 0。 同 时 定义 了 父 元 素 
和 元 素 本 身 的 各 种 显示 属性 ， 目 的 是 用 来 显示 补 白 和 边界 的 范围 。 代 码 运行 后 在 正 浏览 器 中 
的 显示 效果 各 图 14-9 所 示 。 在 Firefox 浏览 器 中 的 显示 效果 如 图 14-10 所 示 。 


Balglx ) 无 标题 文 区 - 了 irefox ~ 火 糯 中 国 知 =I9lxl 
朗 件 人 0 和) EEC 工具 加 ) 和 到 -有 文件 F) 编辑 下 ) 查看 具 (I) 帮助 
有 a "OQ: 加 加 名 | 搜索 wt 了 收 基 灾 


二 EL 
| 列表 元 素 显 示 效 果 的 实 


fm。 
| dy 


i 
| 


[Eg I mwceews 


图 14-9 列表 元 素 在 正 浏览 器 中 的 显示 效果 图 14-10 列表 元 素 在 Firefox 浏览 器 中 的 显示 效果 


从 图 14-10 可 以 看 出 ， 当 定义 了 相同 的 边界 和 补 白 属性 后 ， 列 表 元 素 的 显示 效果 在 两 个 浏 
览 器 中 基本 相同 了 。 


4 本 章 习 题 


一 . 选择 题 
1. 以 下 那个 列表 属性 值 的 作用 是 在 页 面 中 形成 方块 符号 的 ? ( )。 
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A.disc B.circle C.square DD. decimal 

2. 以 下 有 关 列 表 属 性 的 说 法 中 ， 正 确 的 是 : ( ) 

A. 使 用 标记 位 置 属 性 的 属性 值 outside 时 ， 列 表 符号 标记 会 显示 在 文本 之 内 。 

B. 如 果 同 时 定义 了 列表 的 图 片 属性 和 列表 符号 属性 ， 则 会 显示 列表 图 片 ， 而 忽略 定义 的 


列表 符号 。 


C. 在 混用 的 列表 中 , 如 果 第 三 行 第 一 次 使 用 大 写 英 文字 母 属性 值 , 会 显示 大 写 英文 字母 A。 
D. 如 果 同 时 定义 了 列表 的 图 片 属性 和 列表 符号 属性 ， 则 会 显示 列表 符号 ， 而 忽略 定义 的 


列表 图 片 。 


3. liststyleflist-style-type:upperroman:} 表示 的 意思 是 ( )。 

A. 本 列 的 列表 符号 为 小 写 罗马 字母 

B. 本 列 的 列表 符号 为 大 写 罗马 字母 

C. 本 列 的 列表 符号 为 小 写 英文 字母 

D. 本 列 的 列表 符号 为 大 写 英文 字母 

4. 关于 列表 综合 属性 (list-style) 的 使 用 不 正确 的 是 : (。 )。 

A. 列表 综合 属性 可 以 用 来 统一 定义 列表 的 各 种 显示 效果 

B. 列表 综合 属性 同时 定义 列表 的 标记 位 置 、 使 用 图 片 、 列 表 符 号 等 属性 

C. 使 用 列表 综合 属性 的 时 候 ， 交 换 列表 各 种 属性 值 的 位 置 ， 并 不 影响 属性 的 显示 效果 。 
D. 使 用 列表 综合 属性 的 时 候 ， 交 换 列 表 各 种 属性 值 的 位 置 ， 就 会 影响 属性 的 显示 效果 。 


二 、 填 空 题 
1， 在 页 面 中 使 用 大 写 罗马 字母 作为 列表 符号 的 代码 是 


2. 列表 图 像 属性 Qlist-style-image) 中 ， 可 以 使 用 两 个 属性 值 和 ， 分 别 表示 
和 


三 、 实 战 练习 
1. 制作 一 个 6 行 混用 列表 符号 的 实例 的 页 面 。 要 求 各 行 中 依次 使 用 方块 、 数 字 、 大 写 英 


文字 母 、 小 写 罗马 字母 和 图 片 (图 片 的 大 小 要 合适 )。 最 后 一 行 默认 。 注 意 它 们 各 自在 页 面 中 的 
效果 。 


2. 制作 一 个 使 用 列表 符号 的 实例 的 页 面 ， 并 统一 列表 元 素 的 边界 和 补 白 为 0， 要求 定义 


列表 标记 显示 在 文本 之 外 ， 背 景 为 灰色 ， 字 体 为 黑色 。 
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表格 元 素 ， 一 般 用 来 显示 矩阵 格式 的 数据 。 在 CSS 中 ， 可 以 通过 相应 的 表现 属性 来 定义 
表格 元 素 的 表现 效果 。 除 了 可 以 定义 表格 的 边框 、 补 白 、 边 界 等 属性 之 外 ， 还 可 以 使 用 表格 独 
有 的 CSS 属性 ， 如 边框 合并 属性 (border-collapse) 等 ， 对 表格 进行 进一步 的 控制 。 


必 、 本章 主要 内 容 有 : 


熟悉 CSS 控制 表格 元 素 边框 的 各 个 属性 及 其 应 用 。 
@ ”属性 单元 格 的 制约 关系 。 
@ ”精确 控制 表格 与 单元 格 的 大 小 。 


跟 我 学 HTML+CSS 


5.7 | 控制 表格 元 素 的 显示 


在 CSS 中 ， 表 格 元 素 的 控制 包括 控制 表格 边框 是 否 合并 、 控 制 表格 边框 间距 、 表 格 标题 
位 置 等 几 个 方面 的 内 容 。 由 于 浏览 器 对 CSS 属性 的 支持 情况 不 同 , 部 分 属性 只 有 在 特定 的 浏览 
器 中 才能 够 显示 相应 的 效果 。 下 面 进 行 详细 讲解 。 


15.1.1 ”边框 合并 属性 boder-collapse 


边框 合并 属性 (boder-collapse) 用 来 定义 表格 中 边框 是 独立 显示 还 是 合并 显示 。 在 边框 合并 
属性 中 ， 使 用 的 属性 值 有 两 个 : separate 和 collapse。 其 语法 结构 如 下 所 示 。 


border-collapse : separate | collapse; 


其 中 部 分 属性 值 的 含义 如 下 所 示 。 

> separate: 定义 表格 边框 独立 显示 。 

> collapse: 定义 表格 边框 重 全 显示。 

下 面 是 一 个 使 用 边框 合并 属性 的 实例 ， 其 代码 如 下 所 示 。 


boder-collapse.html 
01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 ”<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 边 框 合并 属性 </title> 
05 <style> 
06 table 
border:3px solid #000000; 
margin:0 0 18px 0; 


07 .tablel 
{ 
border-collapse:separate; 
由 

08 .table2 
{ 
border-collapse:collapse: 
} 

09 td 
4 
border: 1px solid #999999; 
width:200px: 
height:80px:; 
} 

10 </style> 
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11 </head> 
12 <body> 
<table class="tablel"> 
<t> 


<td> 这 里 是 表格 中 使 用 边框 合并 属性 的 情况 </td> 
<td> 这 里 是 表格 中 使 用 边框 合并 属性 的 情况 </td></t> 


<t> 

<td> 这 里 是 表格 中 使 用 边框 合并 属性 的 情况 </td> 

<td> 这 里 是 表格 中 使 用 边框 合并 属性 的 情况 </td></tr></table> 
<table class="table2"> 

<t> 

<td> 这 里 是 表格 中 使 用 边框 合并 属性 的 情况 </td> 

<td> 这 里 是 表格 中 使 用 边框 合并 属性 的 情况 </td></t> 

<t> 

<td> 这 里 是 表格 中 使 用 边框 合并 属性 的 情况 </td> 

<td> 这 里 是 表格 中 使 用 边框 合并 属性 的 情况 </td></tr></table> 


13 </body> 
14 </html> 
以 上 的 代码 中 ，12 行 中 分 别 定义 了 两 个 两 行 两 列 的 表格 。07 行 在 第 一 个 表格 中 ， 定 义 边 
框 合并 属性 值 为 独立 显示 。08 行 在 第 二 个 表格 中 ， 定 义 边框 合并 属性 值 为 合并 显示 。 同 时 06 
行 定 义 了 表格 边框 为 3px 黑色 实 线 边框 , 09 行 定义 单元 格 为 1px 灰色 实 线 边框 。 另外 还 定义 了 
表格 的 边界 属性 ， 目 的 是 将 表格 之 间 分 隔 一 段 距 离 。 代 码 运行 后 的 显示 效果 如 图 15-1 所 示 。 


是 表格 中 使 用 边框 合并 忆 昌 是 下 中 使 用 本 并 
性 的 情况 属性 的 情况 
外 


是 表格 中 使 用 边框 合并 | 术科 中 使 用 边 相合 闪 
性 的 情况 


图 15-1 边框 合并 属性 的 显示 效果 


15.1.2 ”表格 边框 间距 属性 border-spacing 
表格 边框 间距 属性 (border-spacing) 用 来 定义 表格 中 独立 边框 之 间 的 距离 。 在 表格 边框 间距 
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属性 中 ， 使 用 的 属性 值 是 长 度 值 。 其 语法 结构 如 下 所 示 。 


border-spacing : length; 


rr” 


| 记 


性 将 不 起 作用 。 同 时 更 浏览 器 中 并 不 支持 表格 边框 间距 属性 ， 只 有 在 Firefox 等 浏览 
器 中 ,才能 


当 在 表格 边框 合并 属性 中 使 用 合并 显示 值 (collapse) 的 时 候 ， 使 用 表格 边框 间距 属 


够 正常 显示 出 间距 的 效果 。 


下 面 是 一 个 使 用 表格 边框 间距 属性 的 实例 ， 其 代码 如 下 所 示 。 
border-spacing.html 
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<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title>css 属性 实例 </tile> 

<style> 

.tablel 

ut 

border-spacing:20px; 
border-collapse:separate: 

} 

-table2 

border-spacing:20px; 
border-collapse:collapse; 


<table class="tablel"> 

<tr><td> 这 里 是 表格 中 的 内 容 部 分 </td><td> 这 里 是 表格 中 的 内 容 部 分 </td></t> 
<tr><td> 这 里 是 表格 中 的 内 容 部 分 </td><td> 这 里 是 表格 中 的 内 容 部 分 </td></tr></table> 
<table class="table2"> 

<tr><td> 这 里 是 表格 中 的 内 容 部 分 </td><td> 这 里 是 表格 中 的 内 容 部 分 </td> 

</tr><td> 这 里 是 表格 中 的 内 容 部 分 </td><td> 这 里 是 表格 中 的 内 容 部 分 </td></tr> 
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13 </table> 
14 <body> 
15 </html> 
以 上 的 代码 中 ，12 行 中 分 别 定义 了 两 个 两 行 两 列 的 表格 。06 行 在 第 一 个 表格 中 ， 定 义 边 
框 合并 属性 值 为 独立 显示 ， 并 且 定义 了 表格 边框 间距 属性 值 为 20px。07 行 在 第 二 个 表格 中 ， 
定义 了 基本 相同 的 属性 ， 只 是 在 表格 边框 合并 属性 中 ， 定 义 属性 值 为 合并 显示 。 另 外 还 定义 了 
表格 的 边界 属性 ， 目 的 是 将 表格 之 间 分 隔 一 段 距 离 。 代 码 运行 后 ， 在 正 浏览 器 中 的 显示 效果 
如 图 15-2 所 示 。 在 Firefox 浏览 器 中 的 显示 效果 ， 图 15-3 i 


ef E29 Er 凤 卫 加 工具 中 表 且 如 


| 包 
EI Cs 


地 址 四 En wm EPEICGE 
习 
表格 中 的 内 容 时 分 表格 中 的 内 容 部分 
天 人 中 的 内 容 部 分 表格 中 的 内 容 部 分 
中 鸭 内 容 部 分 天 相 中 的 内 容 部 分 Wl Ni 


| 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 
| 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 
E| 
BE Teme 


15-2 ”表格 边框 间距 属性 在 下 中 的 效果 15-3 ”表格 边框 间距 属性 在 Firefox 中 的 效果 


15.1.3 ”表格 标题 位 置 属性 caption-side 


表格 标题 位 置 属性 (caption-side) 用 来 定义 表格 中 标题 元 素 <caption> 显 示 的 位 置 。 在 表格 标 
题 位 置 属性 中 ， 可 以 使 用 4 个 属性 值 ，top、right、bottom 和 left。 其 语法 结构 如 下 所 示 。 


caption-side : top | right | bottom | left; 


| 


| 户 注 意 


| 在 全 浏览 器 中 ， 不 支持 表格 标题 位 置 属性 ， 只 有 在 Firefox 等 浏览 器 中 ， 才 能 够 


正常 显示 表格 标题 位 置 的 变化 。 同时 在 表格 中 ， 必 须 首 先 定义 标题 元 素 <caption>， 这 
样 才能 够 正常 更 改 标题 元 素 的 位 置 。 


下 面 是 一 个 使 用 表格 标题 位 置 属性 的 实例 ， 其 代码 如 下 所 示 。 
caption-side.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 ”<meta http-equiv="Content-Type" conten 人 "texthtml: charset—utf-8" /> 
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<body> 
<table class="caption1"> 
<caption> 表 格 标题 </caption> 
<tr><td> 这 里 是 表格 中 的 内 容 部 分 </td><td> 这 里 是 表格 中 的 内 容 部 分 </td></tr></table> 
<table class="caption2"> 
<caption> 表 格 标题 </caption> 
<tr><td> 这 里 是 表格 中 的 内 容 部 分 </td><td> 这 里 是 表格 中 的 内 容 部 分 </td></tr></table> 
<table class="caption3"> 
<caption> 表 格 标题 </caption> 
<tr><td> 这 里 是 表格 中 的 内 容 部 分 </td><td> 这 里 是 表格 中 的 内 容 部 分 </td></tr> 
</table> 
<table class="caption4"> 
<caption> 表 格 标题 </caption> 
<tr><td> 这 里 是 表格 中 的 内 容 部 分 </td><td> 这 里 是 表格 中 的 内 容 部 分 </td></tr> 
/table> 
15 <body> 
16 <htm> 


以 上 的 代码 中 ，14 到 15 行 中 定义 了 4 个 两 行 的 表格 。06 到 10 行 分 别 在 4 个 表格 中 ， 定 
义 了 不 同 的 表格 标题 位 置 属性 值 。 代 码 运行 后 ， 在 正 浏览 器 中 的 显示 效果 如 图 15-4 所 示 。 在 
Firefox 浏览 器 中 的 显示 效果 如 图 15-5 所 示 。 
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rr [> 表格 标 原 和 于 尼 性 实 鹿 ”7irsfes - 火 守 加 TE 
习 Er E22 ] 
表 属 标题 于 条 有 局 属性 实 刘 |。 表 属 if 何 距 | | 委 稳 标本 位 一 回 
表格 标题 
| 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 
| 表格 中 的 内 容 部 分 表 恪 中 的 内 容 部 分 
表格 标题 
| 
表格 中 的 内 容 部 分 | 表格 中 的 内 容 部 分 | 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 


表格 标 起 es 一 一 - -一 一 一 
| 表 恪 中 的 内 容 部 分 表格 中 的 和 内容 部 分 
| 表格 中 的 内 容 部 分 
|easaweme 


表 恪 标 十 


表格 中 的 内 容 部 分 


题 


| 表格 中 的 内 容 部 分 表格 中 的 内 容 部 分 


一 


Ed [lll 


15-4 表格 标题 位 置 属性 在 正 中 的 效果 15-5 ”表格 标题 位 置 属性 在 Firefox 中 的 效果 


15.1.4 ”表格 布局 属性 table-layout 


表格 布局 属性 (table-layout) 用 来 定义 表格 和 表格 内 容 之 间 的 关系 。 在 表格 布局 属性 中 ， 可 
以 使 用 两 个 属性 值 ，auto 和 fixed。 其 语法 结构 如 下 所 示 。 
table-layout : auto | fixed; 


其 中 各 个 属性 值 的 含义 ， 如 下 所 示 。 

> auto: 表格 按照 内 容 的 多 少 自动 分 配 各 个 单元 格 的 宽度 。 
> fixed: 表格 按照 单元 格 中 定义 的 宽度 显示 表格 内 容 。 

下 面 是 一 个 使 用 表格 布局 属性 的 实例 ， 其 代码 如 下 所 示 。 


WE table-layout.html 
1 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title>css 属性 实例 </tide> 
05 <style> 
06 .layoutl 


table-layout:auto; 


} 
07 .layout2 


1 
table-layout-fixed; 


08 table 
上 
width:S00px: 
height:150px; 


321 


跟 我 学 HTML+CSS 


border:2px solid #000000; 
margin:0 0 20px 0; 
} 
09 td 
区 
border: 1px solid #999999; 
width:50%; 
} 
10 </style> 
11 </head> 
12 <body> 
<table class= "layoutl"> 
<t> 
<td><img src="images/pic.jpg" alt="pic" /></td> 
<td>assdssdsdabcdefehijkimnopqrs</td></tr> 


<t> 
<td> 这 里 是 表格 中 的 内 容 部 分 </td> 
<td> 这 里 是 表格 中 的 内 容 部 分 </td></tr></table> 
<table class="layout2"> 
<t> 
<td><img src="images/pic.jpg" alt="pic" /></td> 
<td>assdssdsdabcdefehijklmnopqrs</td></tr> 


<t> 
<td> 这 里 是 表格 中 的 内 容 部 分 </td> 
<td> 这 里 是 表格 中 的 内 容 部 分 </td></t></table> 
13 </body> 
14 </html> 
以 上 的 代码 中 ，06 和 07 行 在 两 个 <table> 元 素 里 定义 了 不 同 的 表格 布局 属性 值 。 同 时 统一 
定义 了 表格 的 宽度 、 高 度 、 边 框 等 属性 ， 以 及 单元 格 边框 和 宽度 属性 。 以 上 代码 在 正 浏览 器 
中 的 显示 效果 如 图 15-6 所 示 。 在 Firefox x 浏览 器 中 的 显示 效果 如 图 15-7 所 示 。 


这 是 一 率 峡 从 
A EE 
这里 是 表格 中 的 内 容 部 分 | 取 讲 二 天生 下 次 内衣 人 下 主 是 末 洛 中 胃 内 二 京介 | 这 主 是 表 和 中 的 册 委 让 
EE TT Sve 
图 15-6 表格 布局 属性 在 正 中 的 效果 图 15-7 表格 布局 属性 在 Firefox 中 的 效果 
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从 图 15-6 可 以 看 出 , 在 正 浏览 器 中 ， 如 果 定 义 表格 布局 属性 值 为 fxed， 则 单元 格 中 的 内 
容 将 会 被 裁 前 ， 同 时 保持 表格 的 总 体 宽度 不 变 。 从 图 15-7 可 以 看 出 ， 在 Firefox 浏览 器 中 ， 如 
果 定义 表格 布局 属性 值 为 fixed, 则 单元 格 中 的 内 容 不 会 被 裁剪 , 同时 两 格 单元 格 中 的 内 容 将 发 
生 重 登 。 每 个 单元 格 中 的 内 容 ， 按 照 各 自 原 有 的 方式 显示 ， 并 可 以 显示 在 表格 之 外 。 


75.2 | 单元 格 的 制约 关系 


在 使 用 表格 元 素 的 时 候 ， 通 过 定义 CSS 样式 ， 可 以 控制 单元 格 的 高 度 、 宽 度 等 显示 效果 。 
当 在 某 个 单元 格 中 定义 了 相应 的 属性 ， 与 该 单元 格 相 邻 的 单元 格 也 将 会 受到 影响 。 同 时 当 多 个 
单元 格 中 , 定义 的 高 度 和 宽度 与 表格 高 度 、 宽 度 发 生 矛 盾 时 , 表格 中 单元 格 也 会 做 相应 的 调整 。 
其 中 具体 的 内 容 如 下 所 示 。 


15.2.1 ”确定 单行 或 列 的 宽度 或 高 度 


在 使 用 表格 元 素 的 时 候 ， 由 于 表格 中 存在 多 个 行 或 列 ， 同 时 在 每 个 单元 格 中 都 可 以 定义 宽 
度 和 高 度 。 当 在 某 一 列 中 ， 单 元 格 中 定义 的 宽度 不 同 (并 且 不 超过 表格 的 宽度 ) 时 ， 会 使 用 较 大 
的 宽度 值 。 但 是 在 某 一 行 中 ， 当 定义 某 个 单元 格 的 高 度 属性 值 时 ， 如 果 其 他 行 没有 定义 任何 高 
度 属性 ， 则 按照 最 小 的 高 度 显示 。 

下 面 是 一 个 同行 或 列 中 存在 不 同 高 度 或 宽度 的 实例 ， 其 代码 如 下 所 示 。 
example.html 

01 <html xmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 


04 ”<title>css 属性 实例 </title> 
05 <style> 


07 td2 


08 .td3 


height: 100px: 
} 
09 .td4 
EL 
height:S0px; 
10 table 
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<td class="td1"> 表 格 中 的 内 容 部 分 </td> 
<td> 表 格 中 的 内 容 部 分 </td></t> 
<t> 


<td class="td2"> 表 格 中 的 内 容 部 分 </td> 


<td> 表 格 中 的 内 容 部 分 </td></tr></table> 
<table> 


<tr> 
<td class="td3"> 表 格 中 的 内 容 部 分 </td> 


<td class="td4'> 表 格 中 的 内 容 部 分 </td></tr> 
<t> 


<td> 表 格 中 的 内 容 部 分 </td> 


<td> 表 格 中 的 内 容 部 分 </td> 
</tr></table> 


16 </body> 
17 </html> 


以 上 的 代码 中 ，06 和 07 行 在 第 一 个 表格 的 第 一 列 中 ， 分 别 定义 了 两 个 宽度 分 别 为 300px 
和 200px 的 单元 格 。 08 和 09 行 在 第 二 个 表格 的 第 一 行 中 , 分 别 定义 两 个 单元 格 的 高 度 为 100px 
和 50px。 代 码 运行 后 的 显示 效果 如 图 15-8 所 示 。 


EECE 


格 中 的 内 容 部 分 格 中 的 内 容 部 分 
格 中 的 内 容 部 分 格 中 的 内 容 部 分 


Cr 号 


图 15-8 确定 单行 或 列 大 小 的 显示 效果 
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从 图 15-8 可 以 看 出 ， 最 终 行 或 列 的 宽度 或 高 度 均 和 本 行 中 定义 的 最 大 宽度 或 高 度 相同 。 
同时 在 未 合并 任何 单元 格 的 情况 下 ， 表 格 同行 或 列 均 显示 相同 的 宽度 或 高 度 。 


15.2.2 ”确定 多 行 或 列 的 宽度 或 高 度 


如 果 在 同 个 行 或 列 中 , 每 个 单元 格 中 都 定义 了 宽度 或 者 高 度 属性 值 ， 并 且 全 部 单元 格 的 宽 
度 或 高 度 之 和 与 表格 的 宽度 或 高 度 不 相等 ， 此 时 每 个 单元 格 将 按照 各 自 定义 的 宽度 比例 确定 最 
终 的 宽度 ， 而 在 高 度 方面 ， 每 个 单元 格 均 保持 各 自 的 高 度 。 

下 面 是 一 个 确定 多 行 或 列 最 终 效果 的 实例 ， 其 代码 如 下 所 示 。 


WE example.html 


01 
02 
03 
04 
05 
06 


07 


08 


10 


11 


12 
13 
14 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title>css 属性 实例 </title> 
<style> 

‘tdl 

{ 

height:200px: 

; 

‘td2 

{ 

height: 100px: 

} 

td3 

上 

width:600px; 

} 

‘td4 

Ud 

width:300px: 

} 

table 

{ 

width:S00px: 
height:150px: 

border3px solid #000000:; 
margin:0 0 20px 0; 

} 

td 

' 

border:2px solid #999999; 
} 

</style> 

</head> 

<body> 

<table> 
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<t> 


<td class="td1"> 科 学 部 分 </td> 
<td> 人 文部 分 <td></t> 


<tr> 
<td class="td2"> 自 然 科 学 </td> 
<td> 人 物 传记 </td></tr></table> 
<table> 
<t> 


<td class="td3'> 社 会 科学 </td> 
<td class="td4"> 历 史 政治 </td></t> 
<tr> 
<td> 哲 学 思想 </td> 
<td> 天 文 地 理 </td></tr></table> 
15 </body> 
16 </html> 


以 上 的 代码 中 ，10 行 定义 两 个 表格 的 宽度 均 为 500px， 高 度 均 为 150px。06 和 07 行 在 第 
一 个 表格 中 , 定义 第 一 列 中 , 两 个 单元 格 的 高 度 为 200px 和 100px( 此 时 高 度 之 和 大 于 表格 高 度 )。 


08 和 09 行 在 第 二 个 表格 中 ， 定 义 第 一 行 中 ， 两 个 单元 格 的 宽度 为 600px 和 300px( 此 时 宽度 之 
和 大 于 表格 宽度 )。 代 码 运行 后 的 显示 效果 如 图 15-9 所 示 。 


15-9 ”多 行 或 列 中 定义 大 小 的 显示 效果 


从 图 15-9 可 以 看 出 使 用 tdl 和 td2 时 高 度 按 比例 分 配 ， 使 用 td3 和 td4 的 时 候 宽 度 按 比例 
分 配 。 
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15.2.3 ”单元 格 与 谋 套 的 <div> 元 素 

在 制作 页 面 的 时 候 ， 表 格 中 单元 格 宽度 和 高 度 之 间 存 在 着 制约 的 关系 。 当 某 个 单元 格 内 容 
变动 的 时 候 ， 相 关联 的 行 或 列 都 会 自动 地 适应 单元 格 的 变化 。 在 使 用 嵌 套 的 <div> 元 素 进行 布 
局 的 时 候 ， 并 列 的 <div> 元 素 之 间 ， 各 自 独立 显示 ， 无 法 适应 其 他 <div> 元 素 的 变化 。 

下 面 是 一 个 使 用 表格 单元 格 和 网 套 <div> 元 素 的 实例 ， 其 代码 如 下 所 示 。 


EE example.html 


07 


08 


11 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title>css 属性 实例 </title> 

<style> 

‘tdl 


! 
background:#999999: 
} 

-td2 

{ 
background:#FF0066; 
} 

.divl 

float:left; 

width:50%; 
background:#999999; 
Yt 

-div2 

{ 

float:left: 

width:50%%:; 
background:#FF0066; 
} 

-div0 

1 

width:S00px: 
border:2px solid #000000: 


table 

{ 

width:500px: 

border:3px solid #000000: 
margin:0 0 20px 0: 

} 

td 

lt 

border:2px solid #999999; 
上 

</style> 

</head> 

<body> 
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<table> 
<t> 
<td class="td1"> 这 里 是 表格 中 的 内 容 部 分 </td> 
<td class="td2"> 这 里 是 表格 中 的 内 容 部 分 <br 亿 这 是 添加 的 部 分 <br > 这 是 添加 的 部 分 <br 请 这 是 添 
加 的 部 分 </td></t> 
</table> 
<div class="div1"> 这 里 是 表格 中 的 内 容 部 分 </div> 


<div class="div2"> 这 里 是 表格 中 的 内 容 部 分 <br 记 这 是 添加 的 部 分 <br > 这 是 添加 的 部 分 <br 人 > 这 是 
添加 的 部 分 </div> 


以 上 的 代码 中 ， 在 <table> 元 素 和 嵌 套 <div> 元 素 的 父 元 素 中 ， 定 义 了 相同 的 宽度 、 边 框 属 
性 值 。 在 单元 格 和 英 套 的 子 元 素 中 ， 定 义 了 相同 的 背景 颜色 。 当 右 侧 单元 格 或 者 子 元 素 中 添加 
内 容 后 ， 页 面 的 显示 效果 如 图 15-10 所 示 。 


文件 四 编 可 加 ) 让 收藏 人 工具 CD 帮助 0 


地 址 四 ) ET My Documents\16\Untitled-10. htnl 


CT rr 
图 15-10 ”单元 格 与 嵌 套 的 <div> 元 素 的 显示 效果 


从 图 15-10 可 以 看 出 , 在 表格 中 ,由 于 单元 格 的 制约 关系 ， 当 一 侧 的 单元 格 中 内 容 增加 时 ， 
另 一 侧 的 背景 会 随 之 增加 。 但 在 <div> 元 素 构成 的 结构 中 ， 由 于 各 个 <div> 相 互 独立 ， 所 以 背景 
也 各 自 独立 显示 。 


95.3 | 本 章 习题 


一 、 选 择 题 


1. 以 下 关于 表格 边框 间距 属性 (border-spacing) 关 系 说 法 中 ， 错 误 的 是 : (。 ) 
A. 正 浏览 器 中 ， 并 不 支持 表格 边框 间距 属性 。 
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一 


B. 在 Firefox 浏览 器 中 ， 能 够 正常 显示 出 间距 的 效果 。 

C. 表格 边框 间距 属性 使 用 的 属性 值 是 长 度 值 。 

D. 表格 边框 间距 属性 的 效果 在 正 浏览 器 中 也 可 以 显示 。 

2. 以 下 有 关 表 格 标题 位 置 属性 (caption-side) 定 义 中， 正确 的 是 : ( ) 

A. 正 浏览 器 中 ， 表 格 标题 位 置 属性 作用 效果 会 正确 显示 。 

B. 在 Firefox 浏览 器 中 ， 表 格 标题 位 置 属性 作用 效果 会 正确 显示 。 

C. 在 表格 中 ， 不 定义 标题 元 素 <caption>， 也 能 够 正常 更 改 标题 元 素 的 位 置 。 
D. caption{caption-side:bottom:} 在 下 浏览 器 中 ， 标 题 会 显示 在 表格 的 下 方 。 


二 、 填 空 题 

1. 边框 合并 属性 (boder-collapse) 用 来 定义 。 在 边框 合并 属性 中 ， 
使 用 的 属性 值 有 和 8 

2. 表格 标题 位 置 属性 (caption-side) 用 来 定义 。 在 表格 标题 位 置 属性 中 ， 
可 以 使 用 4 个 属性 值 : 8 

3. 表格 布局 属性 (table-layout) 中 ， 可 以 使 用 两 个 属性 值 : 和 ， 分 别 表示 

和 了 
三 、 实 战 练 习 


1. 制作 两 个 两 行 两 列 的 表格 。 在 第 一 个 表格 中 ， 定 义 边框 合并 属性 值 为 独立 显示 ， 并 且 
定义 了 表格 边框 间距 属性 值 为 S0px。 在 第 二 个 表格 中 ， 表 格 边 框 合并 属性 值 为 合并 显示 。 分 别 
在 下 浏览 器 和 Firefox 浏览 器 中 显示 ， 注 意 它们 的 效果 。 

2. 制作 一 个 表格 ， 要 求 表格 标题 在 表格 的 右边 显示 。 分 别 在 正 浏览 器 和 Firefox 浏览 器 
中 显示 ， 注 意 它们 的 效果 。 

3， 使 用 表格 布局 属性 table-layout 制作 两 行 两 列表 格 ， 要 求 在 其 中 的 一 个 单元 格 中 使 用 图 
片 。 分 别 在 正 浏览 器 和 Firefox 浏览 器 中 显示 ， 注 意 它们 的 效果 。 


As 


CSS 树 制 元 素 的 大 小 


在 网 页 中 ， 一 个 元 素 占有 空间 的 大 小 ， 由 几 个 部 分 构成 。 其 中 包括 元 素 的 内 容 、 元 素 的 补 
白 、 元 素 的 边框 、 元 素 的 边界 等 4 个 部 分 。 在 这 4 个 部 分 占有 的 空间 中 ， 有 的 部 分 可 以 显示 相 
应 的 内 容 ， 而 有 的 部 分 只 用 来 分 隔 相 邻 的 元 素 或 区 域 。4 个 部 分 一 起 构成 了 CSS 中 元 素 的 盒 模 
型 。 合 理 控制 元 素 实际 占有 空间 的 大 小 ， 有 助 于 更 好 地 对 各 个 元 素 进行 合理 的 布局 。 


全 、 本章 主要 内 容 有 : 


@ 理解 盒 模型 的 概念 。 

@ 能够 熟练 控制 元 素 内 容 的 大 小 。 

@ 熟悉 页 面 背 景 的 各 个 属性 。 

@ 重点 掌握 元 素 的 补 白 和 边界 的 特点 及 其 使 用 方法 。 
熟悉 元 素 的 背景 和 边框 的 属性 及 其 应 用 方法 。 


跟 我 学 HTML+CSS 


了 6.7 | 盒 模型 的 概念 


一 个 块 元 素 可 以 看 成 是 一 个 盒子 形状 的 模型 。 这 个 模型 的 主体 部 分 是 元 素 的 内 容 部 分 , 用 
来 显示 元 素 中 的 主要 信息 ， 这 个 部 分 由 width( 宽 度 ) 属 性 和 height( 高 度 ) 属 性 来 控制 。 在 内 容 部 
分 之 外 是 补 白 部 分 , 由 padding( 补 白 ) 属 性 控制 。 在 补 白 部 分 之 外 是 元 素 的 边框 , 由 border( 补 白 ) 
属性 控制 。 在 盒 模型 的 最 外 面 是 边界 部 分 ， 由 margin( 补 白 ) 属 性 控制 。 盒 模型 的 具体 显示 效果 ， 
如 图 16-1 所 示 。 


一 content edge 


po 


__ padding edge 


border edge 


了 ~ margin edge 


bottom 


16-1 盒 模型 的 示意 图 


可 以 发 现 ， 一 个 元 素 所 占有 的 空间 ， 与 盒 模型 中 4 个 部 分 各 自 占有 空间 有 关 。 由 于 在 CSS 
中 ， 可 以 分 别 定义 每 个 方向 上 的 盒 模 型 属性 (内 容 部 分 除外 )。 所 以 整个 元 素 占有 空间 的 宽度 ， 
使 用 下 面 的 公式 计算 。 


左边 界 + 左边 框 + 左 补 白 + 宽 度 + 右 补 白 + 右边 框 + 右边 界 

整个 元 素 占 有 空间 的 高 度 ， 使 用 下 面 的 公式 计算 。 

上 边界 + 上 边框 + 上 补 白 + 高 度 + 下 补 白 + 下 边框 + 下 边界 

在 使 用 CSS 布局 时 ， 要 随时 注意 计算 元 素 占 有 的 空间 。 在 盒 模型 中 ， 除 width( 宽 度 ) 属 性 
和 height( 高 度 ) 属 性 包含 的 内 容 部 分 之 外 ， 其 他 的 区 域 中 ， 可 能 不 显示 任何 内 容 (可 能 会 显示 元 


素 自身 , 或 者 其 他 元 素 的 背景 )。 这 就 使 元 素 占 有 区 域 大 小 含有 很 大 的 隐蔽 性 ， 从 而 给 合理 布局 
元 素 带 来 很 大 的 困难 。 


1 | 元 素 内 容 的 大 小 
元 素 内 容 的 大 小 ， 用 来 控制 元 素 内 容 的 显示 效果 。 通 党 使 用 宽度 属性 (vidtb 和 高 度 属性 
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16:2.1 


SSE 一 
Cheighb 来 定义 。 有 时 候 ( 例 如 ， 对 元 素 的 适应 性 有 特殊 要 求 的 时 候 ) 还 要 使 用 其 他 的 几 个 尺寸 属 
性 ， 包 括 max-width、min-width、max-height、min-height 等 。 下 面 分 别 进行 讲解。 


宽度 属性 width 


宽度 属性 (widtb) 用 来 定义 元 素 内容 的 宽度 。 在 宽度 属性 中 ， 可 以 使 用 3 种 属性 值 ， 分 别 为 


auto 值 、 


长 度 值 和 百分比 值 。 其 语法 结构 如 下 所 示 。 


widthauto | length | percent: 
下 面 是 一 个 使 用 宽度 属性 的 实例 ， 其 代码 如 下 所 示 。 
width html 


01 
02 
03 
04 
05 
06 


07 
08 
09 


10 
i 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div{ 

width:300px: 

background:#CCFF99;} 

</style> 

</head> 


<body> 
<div> 这 是 一 个 width 属性 的 实例 </div> 


</body> 
</html> 


以 上 的 代码 中 ，06 行 在 div 选择 符 中， 使 用 宽度 属性 定义 元 素 的 宽度 为 300px， 同 时 还 定 
义 了 background 属性 来 定义 元 素 的 背景 颜色 ， 以 便 能 够 更 好 地 显示 元 素 的 大 小 。 以 上 代码 的 显 
示 效 果 ， 如 图 16-2 所 示 。 


16-2 ”宽度 属性 的 显示 效果 
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16.2.2 ”高 度 属性 height 


高 度 属性 (heighb 用 来 定义 元 素 内 容 的 高 度 。 在 高 度 属性 中 ， 可 以 使 用 3 种 属性 值 , 分 别 为 
auto 值 、 长 度 值 和 百分比 值 。 其 语法 结构 如 下 所 示 。 


height:auto | length |percent 


下 面 是 一 个 使 用 height 属性 的 实例 ， 其 代码 如 下 所 示 。 


Lb ld height.html 
01 


<html > 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 div{ 
height:120px: 
width:300px; 
background:#FFFF33;} 
07 </style> 
08 </head> 


<body> 

<div> 这 是 一 个 高 度 属性 的 实例 </div> 
10 </body> 
11 <html> 


以 上 的 代码 中 ， 和 行使 用 高 度 属性 定义 元 素 内 马 无 标题 文档 - Nicrosoft Internet Exzploree 
容 的 高 度 为 120px， 同 时 使 用 宽度 属性 定义 元 素 内 | 8m mh ao ww RW 而 加 站 
容 的 宽度 为 300px。 此 时 元 素 中 的 内 容 并 没有 超出 “局 ee | 
元 素 定义 的 大 小 时 ， 元 素 内 容 部 分 会 保持 定义 的 大 习 
小 , 在 没有 内 容 的 空白 区 域 将 显示 元 素 的 背景 ( 当 元 
素 有 绒 套 关系 时 ， 也 可 能 显示 父 元 素 的 背景)。 以 上 
代码 的 显示 效果 ， 如 图 16-3 所 示 。 


16.2.3 “内容 与 宽度 、 高 度 属性 的 关系 。 。。 Be 让 ve 


内 容 与 宽度 、 高 度 属性 的 关系 ， 和 使 用 的 浏览 
器 版 本 有 关 。 这 里 以 正 6.0 为 例 来 讲解 两 者 之 间 的 关系 。 

在 正 6.0 中 ,元素 中 的 文本 内 容 在 默认 的 情况 下 ( 即 未 定义 任何 显示 属性 的 情况 下 )， 元 素 
中 的 文本 内 容 ， 会 按照 元 素 定义 的 宽度 属性 自动 换行 显示 。 当 元 素 中 的 文本 内 容 超出 元 素 定义 
的 高 度 属性 值 时 ， 元 素 会 自动 更 改 高 度 ， 以 适应 内 容 的 增加 。 

下 面 是 一 个 元 素 内 容 超出 元 素 定义 大 小 的 实例 ， 其 代码 如 下 所 示 。 


Wl example.html 


01 <html> 
02 <head> 


图 16-3 高 度 属性 的 显示 效果 
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03 


05 


07 
08 


09 <body> 
<div> 元 素 内 容 超 出 元 素 定义 大 小 的 实例 ， 注 意 观察 元 素 背 景 的 延伸 情况 ， 这 将 有 助 于 理解 元 素 内 容 


<meta http-equiv= "Content-Type" content="text/html: charset—utf-8" /> 
<style> 

div{ 

height:60px:; 
width:200px; 
background:#666666;} 
pt{ 

position:absolute; 
left:320px; 

top:15px; 

height:60px: 
width:200px; 
background:-#FFFF33;} 
</style> 

</head> 


与 元 素 大 小 之 间 的 关系 。</div> 


10 
11 


<p> 这 里 是 对 比 内 容 </p> 
</body> 
</html> 


CSS 控制 元 素 的 大 小 


以 上 的 代码 中 ，05 行 中 定义 了 元 素 内 容 的 大 小 为 200pxX 60px， 背 景 颜 色 为 灰色 。 同 时 


06 行 定义 了 一 个 相同 大 小 的 <p> 元 素 作为 参照 。 


ET Documents\lT\Untitled-3. htal ~ Bicroseft TARKSRRRG reel 
文件 编辑 时) 查看 WD 收 荐 由 工具 加) nD 


以 上 代码 的 显示 效果 ， 如 图 16-4 所 示 。 


Qa. © aD Pm im OO 


地 址 0) | | 乱 ] D: \My Docunents\1T\Untitled-3. htnl 


Ti pater 
图 16-4 ”内容 超出 元 素 定义 大 小 的 显示 效果 


了 6.3 了 | 元 素 的 背景 


元 素 的 背景 通常 用 来 显示 修饰 的 内 容 ,可 以 在 背景 中 定义 背景 颜色 ,也 可 以 在 背景 中 定义 
图 像 内 容 。 在 CSS 中 ,背景 属 性 包括 : 背景 颜色 属性 (background-colon 、 背 景 图 片 属性 


(background-1mage) 、 


背景 图 片 重复 属性 (background-repeat) 、 背 景 图 片 位 置 属 性 


(background-position)、 背 景 图 片 滚动 属性 (background-attachmenb)、 背 景 综合 属性 (backeground) 
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等 。 下 面 分 别 进行 讲解 。 


16.3.1 背景 颜色 属性 background-color 


背景 颜色 属性 (background-colonD 用 来 定义 元 素 的 背景 颜色 。 在 背景 颜色 属性 中 ， 可 以 使 用 
两 种 属性 值 ， 分 别 为 颜色 值 和 颜色 名 称 。 其 语法 结构 如 下 所 示 。 


background-color:color | colomame; 
下 面 是 一 个 使 用 背景 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


background-color.html 
01 <htm> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
04 ”<title>ess 属性 实例 </title> 
05 <style> 
06 div{ 


<div> 这 是 灰色 背景 颜色 的 实例 。</div> 
10 </body> 
11 </html> 
在 以 上 的 代码 中 ，06 行 定义 元 素 的 背景 颜色 属性 值 为 灰色 ， 同 时 定义 了 元 素 的 宽度 和 高 
度 ， 方 便 背 景 颜 色 的 显示 。 以 上 代码 的 显示 效果 如 图 16-5 所 示 。 


图 16-5 背景 颜色 属性 的 显示 效果 
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16.3.2 ”背景 图 片 属性 background-image 


背景 图 片 属性 (background-image) 用 来 定义 元 素 的 背景 图 片 。 在 背景 图 片 属性 中 , 要 使 用 图 
片 文件 所 在 的 url 作为 属性 的 值 。 其 语法 结构 如 下 所 示 。 


background-image:url; 
下 面 是 一 个 使 用 背景 图 片 属性 的 实例 ， 其 代码 如 下 所 示 。 
background-image.html 


01 
02 
03 
04 
05 
06 


07 


10 
11 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div{ 

background-image:url(images/pic.jpe): 

height: 100px: 

width:400px: 


<body> 
<div> 这 是 背景 图 。</div> 
</body> 
</html> 


在 以 上 的 代码 中 ，06 行 定义 了 背景 图 片 属性 ， 同 时 定义 了 元 素 的 宽度 和 高 度 ， 方 便 背 景 
图 片 的 显示 。 在 没有 定义 背景 图 片 的 任何 显示 属性 的 时 候 , 背景 图 片 会 以 元 素 的 左上 角 为 中 心 ， 
重复 排列 显示 。 以 上 代码 的 显示 效果 如 图 16-6 所 示 。 


16.3.3 


dy 


二 。:: 屋 性 实例 - Wierose Et Internet Explorer 
文件 四 ”编辑 电 ) 查看 WD 收藏 W) 工具 CD 天助 吕 | 四 | 
Osa: ON mm Tm Mm OO- ”| 
地 址 加 ) [名] 0. \ 际 RI\ es: 书 灯 \04 章 文件 \bginsee htnl | 加 甘 到 | 链接 ”名 smart 图 过 


I ee BE 
SHUHYLOOOPO00! 
OOOO0800800060!( 
0000600000808091 


Ea Copater 有史 


图 16-6 背景 图 片 属性 的 显示 效果 


背景 图 片 的 重复 属性 background-repeat 


背景 图 片 的 重复 属性 (background-repeat) 用 来 定义 元 素 背 景 图 片 的 重复 排列 方式 。 在 背景 图 
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片 的 重复 属性 中 ， 可 以 使 用 4 个 属性 值 ， 分 别 为 repeat、no-repeat、repeat-x 和 repeat-y。 其 语 
法 结构 如 下 所 示 。 


backeround-repeat repeat | no-repeat | repeat-x | repeat-y; 
4 个 属性 值 的 含义 如 下 所 示 。 

> repeat: 背景 图 片 重复 排列 。 

> no-repeat: 背景 图 片 不 重复 排列 。 

> repeat-x: 背景 图 片 沿 XX 轴 重复 排列 。 

> repeat-y: 背景 图 片 沿 Y 轴 重 复 排列 。 


2 


在 使 用 背景 图 片 的 重复 属性 的 时 候 ， 一 定 要 同时 使 用 背景 图 片 属性 。 否则 定义 的 
背景 图 片 的 重复 属性 将 不 起 作用 。 


下 面 是 一 个 使 用 背景 图 片 重复 属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 16-6 | background-repeat.html 


01 <html> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 


Hi 


<div> 这 是 背景 图 片 重复 属性 的 实例 。</div> 


10 </body> 
11 <html> 


在 以 上 的 代码 中 ，06 行 定义 了 背景 图 片 ， 同 时 定义 了 图 片 的 重复 属性 为 纵向 重复 。 在 设 
置 纵向 重复 后 ， 背 景 图 片 会 以 元 素 左 侧 为 基准 ， 纵 向 重复 排列 显示 。 以 上 代码 的 显示 效果 如 图 
16-7 所 示 。 
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文件 中 编 问世 ) 查看 收藏 i 帮助 中 


IE 三 可 


SIE 


SE Ci Sy Cpeter 
图 16-7 背景 图 片 重复 属性 的 显示 效果 


16.3.4 ”背景 图 片 位 置 属 性 background-position 


背景 图 片 位 置 属性 (background-position) 用 来 定义 元 素 背 景 图 片 的 起 始 位 置 。 在 背景 图 片 位 
置 属性 中 , 可 以 使 用 两 种 属性 值 : 一 种 为 长 度 单 位 ,包括 长 度 值 和 百分比 值 ; 另 一 种 为 制定 值 ， 
包括 top、center、bottom、left、center、right 等 。 其 语法 结构 如 下 所 示 。 


background-repeat: length | percent | top | center | bottom | left | right:; 


其 中 部 分 属性 值 的 含义 如 下 所 示 。 


> 
> 
> 
> 
> 


top: 背景 图 片 的 初始 位 置 为 元 素 顶 部 。 
center: 背景 图 片 的 初始 位 置 为 元 素 中 部 。 
left: 背景 图 片 的 初始 位 置 为 元 素 左 侧 。 
right: 背景 图 片 的 初始 位 置 为 元 素 右 侧 。 
bottom: 背景 图 片 的 初始 位 置 为 元 素 底部 。 


在 背景 图 片 位 置 属性 中 , 属性 值 一 般 有 两 个 , 前 一 个 代表 横向 位 置 , 后 一 个 代表 纵向 位 置 。 
使 用 两 个 属性 值 ， 定 义 背 景 图 片 的 起 始 位 置 。 如 果 两 个 方向 的 起 始 位 置 相 同 ， 则 可 以 使 用 一 


个 值 。 


下 面 是 一 个 使 用 背景 图 片 位 置 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl background-position .html 


01 
02 
03 
04 
05 
06 


<html > 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div{ 

background-position:center right: 

background-repeat:repeat-y; 

background-image:url(images/pic.jpg); 

height: 100px: 
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width:400px:} 
</style> 
</head> 


<body> 
<div> 这 是 背景 图 片 位 置 属性 的 实例 。</div> 


</body> 
/html> 


在 以 上 的 代码 中 ，06 行 定义 了 背景 图 片 的 位 置 为 中 间 、 右 部 。 同 时 定义 了 背景 图 片 为 纵 


向 重复 。 


此 时 背景 图 片 会 按照 元 素 的 右边 为 起 点 ， 按 照 背 景 图 片 重复 属性 中 定义 的 属性 值 重 复 


排列 。 以 上 代码 的 显示 效果 如 图 16-8 所 示 。 


下 I 
16-8 背景 图 片 位 置 属性 的 显示 效果 


16.3.5 ”背景 图 片 滚 动 属性 background-attachment 


背景 图 片 滚动 属性 (background-attachmenb) 用 来 定义 元 素 背 景 图 片 是 否 随 浏 览 器 滚 条 的 拖 
动 而 滚动 。 在 背景 图 片 滚动 属性 中 ， 可 以 使 用 两 个 属性 值 ， 分 别 为 scroll 和 fixed。 其 语法 结构 
如 下 所 示 。 

backeround- attachment scroll | fixed: 


其 中 各 个 属性 值 的 含义 如 下 所 示 。 

> scroll: 背景 图 片 随 滚 条 的 变化 而 滚动 。 

> fixed: 背景 图 片 固定 不 动 。 

下 面 是 一 个 使 用 背景 图 片 滚动 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl background-attachment.html 


01 
02 
03 
04 
05 
06 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

body{ 


CSS 控制 元 素 的 大 小 


background-attachment:scroll; 
background-position:center: 
background-repeat:no-repeat:; 
background-image:url(images/pic jpe); 


07 div{ 
height:400px:} 
08 </style> 
09 </head> 
10 <body> 
<div> 背 景 图 片 滚动 属性 的 实例 。</div> 
11 </body> 
12 <htm> 
在 以 上 的 代码 中 ，06 行 定 义 了 背景 图 片 的 滚动 属性 值 为 滚动 。 同 时 定义 了 背景 图 片 为 不 
重复 ， 居 中 显示 。 当 拖 动 浏览 器 右 侧 的 滚 条 时 ， 背 景 图 片 的 位 置 将 发 生 改变 。 以 上 代码 的 在 浏 
览 器 中 运行 后 ， 当 拖 动 滚 条 时 ， 显 示 效 果 分 别 如 图 16-9 和 图 16-10 所 示 。 
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16.3.6 ”同时 使 用 背景 颜色 和 背景 图 片 属性 


当 同 时 使 用 背景 颜色 和 背景 图 片 属性 时 ， 背 景 图 片 会 覆盖 背景 颜色 。 如 果 在 背景 图 片 属性 
中 还 使 用 了 其 他 的 相关 属性 ， 则 在 背景 图 片 显 示范 围 之 外 显示 背景 颜色 。 下 面 是 一 个 同时 使 用 
背景 颜色 和 背景 图 片 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wal example.html 


01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 div{ 
background-color:yellow: 
background-position:center: 


跟 我 学 HTML+CSS 


backsground-repeatTepeat-y; 
background-image:url(images/pic.jpg); 
width:300px:; 
height: 100px:; 
} 
07 </style> 
08 </head> 
09 <body> 
<div> 同 时 使 用 背景 颜色 和 背景 图 片 属性 的 实例 。</div> 
10 </body> 
11 <html> 


在 以 上 的 代码 中 ，06 行 定义 了 背景 颜色 为 黄色 。 同 时 定义 了 背景 图 片 为 居中 ， 纵 向 重复 
显示 。 此 时 纵向 排列 的 背景 图 片 将 覆盖 黄色 的 背景 内 容 。 由 于 图 片 在 横向 不 重复 ， 所 以 在 背景 
图 片 的 两 侧 会 显示 背景 颜色 。 以 上 代码 的 显示 效果 如 图 16-11 所 示 。 
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图 16-11 同时 定义 背景 图 片 和 颜色 的 显示 效果 


16.3.7 ”背景 的 综合 属性 background 


背景 的 综合 属性 (background) 用 来 同时 定义 元 素 背 景 的 各 种 显示 属性 。 在 实际 应 用 CSS 的 
过 程 中 ， 通 常 使 用 背景 的 综合 属性 一 次 定义 所 有 的 背景 属性 。 

背景 的 综合 属性 的 语法 如 下 所 示 。 

Background: background-image background-repeat background-position background-color 
background-attachment: 

在 背景 的 综合 属性 中 ， 所 有 的 背景 属性 值 之 间 ， 使 用 空格 分 隔 。 当 属性 值 的 位 置 发 生变 化 
时 ， 并 不 影响 背景 属性 的 显示 效果 。 

下 面 是 一 个 同时 使 用 背景 的 综合 属性 的 实例 ， 其 代码 如 下 所 示 。 


background html 
01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 
04 <title>css 属性 实例 </title> 
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05 <style> 

06 div{ 
background:url(images/round.jpg) repeat-x center #999999; 
height:100px; 
B 

07 </style> 

08 </head> 


<body> 
<div> 这 是 背景 的 综合 属性 的 实例 。</div> 


在 以 上 的 代码 中 ，06 行使 用 了 背景 综合 属性 ， 一 次 性 定义 了 : 背景 图 片 的 路 径 为 
“images/roundjpg”， 背 景 图 片 的 重复 属性 值 为 横向 重复 ， 背 景 图 片 的 位 置 为 居中 ， 背 景 颜色 
为 黄色 。 以 上 代码 的 显示 效果 如 图 16-12 所 示 。 
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16-12 背景 综合 属性 的 显示 效果 


在 背景 综合 属性 中 ， 可 以 只 定义 部 分 背景 属性 。 其 他 没有 定义 的 背景 属性 ， 以 默 
认 的 方式 显示 。 


96.4 | 元 素 的 补 和 白 


元 素 的 补 白 部 分 用 来 分 隔 元 素 的 内 容 部 分 和 元 素 的 边框 部 分 。 在 CSS 中, 补 白 属性 包括 4 
个 单 侧 补 白 属性 和 1 个 综合 的 属性 ， 共 5 个 属性 。 包 括 上 补 白 属性 (padding-top)、 右 补 白 属性 
(padding-righb 、 下 补 白 属性 (padding-bottom) 、 左 补 白 属 性 (padding-lefp 和 综合 补 白 属性 
(padding)， 下 面 分 别 进行 讲解 。 


跟 我 学 HTML+CSS 


16.4.1 项 部 补 白 属性 padding-top 


顶部 补 白 属性 (padding-top) 用 来 定义 元 素 项 部 边框 与 内 容 之 间 的 距离 。 在 顶部 补 白 属性 中 ， 
可 以 使 用 3 种 属性 值 ， 分 别 为 长 度 值 、 百 分 比值 和 auto 值 。 其 语法 结构 如 下 所 示 。 


padding-top:length | precent | auto; 


下 面 是 一 个 使 用 项 部 补 白 属性 的 实例 ， 其 代码 如 下 所 示 。 


padding-top.html 
01 <htm> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 div{ 
padding-top: 60px; 
background:#ccceec: 
width:300px: 
height:100px: 
} 
07 </style> 
08 </head> 


<body> 
<div> 顶 部 补 白 属性 的 实例 。</div> 

10 </body> 

11 <html> 

在 以 上 的 代码 中 , 06 行 定义 元 素 的 顶部 补 白 属性 。 EREEEEEDEacrriaa 

司 四 问 Dy ;元 窑 文件 四 轴 得 至) 查看 收藏 工具 CD) 帮助 o | 蔓 

为 60px， 同时 背景 颜色 属性 值 为 浅 灰 色 元 素 内 容 大 ne 
小 为 300pxX100px。 此 时 元 素 中 的 内 容 与 页 面 顶部 之 。 aaa we al 加 4 是 
间 将 分 隔 60px 的 距离 。 以 上 代码 的 显示 效果 如 图 上 
16-13 所 示 。 


顶部 补 白 属性 的 实例 。 
16.4.2 右 侧 补 白 属性 padding-right 


右 侧 补 白 属性 (padding-right) 用 来 定义 元 素 右 侧 
边框 与 内 容 之 间 的 距离 。 在 右 侧 补 白 属性 中 ， 可 以 使 
用 3 种 属性 值 ， 分 别 为 长 度 值 、 百 分 比值 和 auto 值 ， 
其 语法 结构 如 下 所 示 。 

padding-right:length | precent | auto; 


下 面 是 一 个 使 用 右 侧 补 白 属性 的 实例 ， 其 代码 如 下 所 示 。 


SlE 


Eg I LA 


图 16-13 顶部 补 白 属 性 的 显示 效果 


CSS 控制 元 素 的 大 小 


LE padding-right.html 


01 


<html > 

<head> 

<meta http-equiv="Content-Type" content="text/htmil: charset=—utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div{ 

padding-right:20%%; 

background:yellow; 

width:300px: 

height:100px: 

} 

</style> 

</head> 

二 

<div> 注 意 观察 元 素 中 内 容 部 分 和 元 素 背景 右 侧 的 距离 。</div> 


body> 
</html> 


在 以 上 的 代码 中 ，06 行 定义 元 素 的 右 侧 补 白 属性 为 20%， 同 时 背景 颜色 属性 值 为 黄色 ， 
元 素 内 容 大 小 为 300px X 100px。 此 时 元 素 中 的 内 容 与 元 素 背 景 右 侧 之 间 将 分 隔 整个 页 面 20% 
的 距离 (注意 不 是 300 的 20%)。 以 上 代码 的 显示 效果 如 图 16-14 所 示 。 
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图 16-14 右 侧 补 白 属性 的 显示 效果 


16.4.3 ”底部 补 白 属 性 padding-bottom 


底部 补 白 属性 (padding-bottom) 用 来 定义 元 素 项 部 边框 与 内 容 之 间 的 距离 。 在 底部 补 白 属性 
中 ， 可 以 使 用 3 种 属性 值 ， 分 别 为 长 度 值 、 百 分 比值 和 auto 值 ， 其 语法 结构 如 下 所 示 。 


padding-bottom:length | precent | auto; 


下 面 是 一 个 使 用 底部 补 白 属性 的 实例 ， 其 代码 如 下 所 示 。 
padding-bottom.html 


01 
02 


<html > 
<head> 


345 


03 <meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 
04 ”<title>css 属性 实例 </title> 


} 
07 </style> 
08 </head> 
09 <body> 
<div> 这 是 右 侧 补 白 属性 的 实例 ， 注 意 观 察 的 显示 高 度 。</div> 
10 </body> 
11 </html> 


在 以 上 的 代码 中 ，06 行 定义 元 素 的 底部 补 白 属性 为 100px， 同 时 背景 颜色 属性 值 为 黄色 ， 
元 素 内 容 大 小 为 400pxX 100px。 此 时 元 素 中 的 显示 高 度 ( 即 元 素 背景 部 分 ) 将 增加 100px。 以 上 
代码 的 显示 效果 如 图 16-15 所 示 。 
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16-15 ”底部 补 白 属性 的 显示 效果 


16.4.4” 左 侧 补 白 属性 padding-left 
左 侧 补 白 属性 (padding-right) 用 来 定义 元 素 项 部 边框 与 内 容 之 间 的 距离 。 在 左 侧 补 白 属性 
中 ， 可 以 使 用 3 种 属性 值 ， 分 别 为 长 度 值 、 百 分 比值 和 auto 值 ， 其 语法 结构 如 下 所 示 。 
padding-left:length | precent | auto; 
下 面 是 一 个 使 用 左 侧 补 白 属性 的 实例 ， 其 代码 如 下 所 示 。 
padding-left.html 
01 <html> 
02 <head> 


03 ”<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 


05 


07 
08 
09 


10 
11 


<style> 
div{ 

padding-left: 100px; 
background:yellow; 
height:100px; 

} 

</style> 

</head> 


<body> 
<div> 注 意 观 察 元 素 内 容 与 背景 左 侧 边线 之 间 的 距离 。</div> 


</body> 
</html> 


在 以 上 的 代码 中 ，06 行 定义 元 素 的 左 侧 补 白 属性 为 100px， 同 时 背景 颜色 属性 值 为 黄色 ， 
元 素 内 容 大 小 为 300px X 100px。 此 时 元 素 中 的 内 容 与 元 素 背 景 左 侧 边线 之 间 将 分 隔 100px 的 距 
离 。 以 上 代码 的 显示 效果 如 图 16-16 所 示 。 


16-16 ”顶部 补 白 属性 的 显示 效果 


16.4.5 ”综合 补 白 属性 padding 


综合 补 白 属性 (padding) 用 来 统一 定义 元 素 的 补 白 属性 。 在 综合 补 白 属性 中 ， 可 以 依次 定义 
元 素 的 四 个 补 白 属性 ， 其 语法 结构 如 下 所 示 。 


padding: padding-top padding-right padding-bottom padding-left; 


Pr 
i 


> 注意 


平 * 
用 padding 属性 时 ， 如 果 提 供 两 个 ， 第 一 个 用 于 上 - 下 ， 第 二 个 用 于 左 - 右 ; 如 果 提 
供 3 个 ， 第 一 个 用 于 上 ， 第 二 个 用 于 左右 ， 第 三 个 用 于 下 。 


在 综合 补 白 属性 中 ，4 个 单 侧 属 性 的 顺序 是 固定 的 。4 个 值 的 顺序 ， 按 照 上 、 左 、 
右 的 顺 时 针 顺序 依次 排列 。 应 用 综合 补 白 属性 padding 可 以 方便 地 设置 页 面 ， 使 
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下 面 是 一 个 使 用 综合 补 白 属性 的 实例 ， 其 代码 如 下 所 示 。 
padding html 


01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=—utf-8" /> 
04 ”<title> 无 标题 文档 </tile> 
05 <style> 
06 div{ 
padding:20px 30px 40px 50px: 
background:yellow; 
width:1S0px: 
height:45px: 
} 
07 </style> 
08 </head> 


<body> 
<div> 这 是 个 使 用 补 白 属性 的 实例 ， 注 意 元 素 内 容 与 元 素 四 个 边界 之 间 的 距离 。</div> 
10 </body> 
11 </html> 
06 行 在 以 上 的 代码 中 ， 依 次 定义 元 素 上 、 左 、 
下 、 右 4 个 边界 的 补 白 属性 ， 分 别 为 20px、30px、 
40px、50px。 以 上 代码 的 显示 效果 如 图 16-17 所 示 。 
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文件 中) 编辑 下 查看 WW 收藏) 工具 帮助 于 | 


16.4.6 ” 补 白 与 背景 


在 元 素 的 补 白 部 分 会 显示 元 素 定义 的 背景 闫 
色 或 者 背景 图 片 。 所 以 当 定 义 补 白 属性 的 时 候 ， 同 
时 也 扩充 了 元 素 背景 的 显示 范围 。 这 在 使 用 固定 大 
小 背景 图 片 的 时 候 非 常 重要 。 如 果 同 时 定义 了 元 素 ”Ri We 
的 宽度 、 高 度 属性 和 补 白 属性 ， 一 定 要 计算 背景 图 图 16-17 补 白 综合 属性 的 显示 效果 
像 的 显示 范围 ， 以 便 能 够 完整 地 显示 图 像 。 
下 面 是 一 个 关于 补 白 与 背景 属性 的 实例 ， 其 代码 如 下 所 示 。 


wa example.html 


4 


01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 div{ 
Padding:60px 60px; 
background:url(images/pic.jpg) no-repeat top left: 
width:100px: 
height:84px: 
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07 
08 
09 


10 
11 


} 
</style> 
</head> 
< 
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<div> 这 是 个 使 用 补 白 属性 的 实例 ， 注 意 元 素 内 容 与 元 素 四 个 边界 之 间 的 距离 。</div> 


<Jbody> 
</html> 


在 以 上 的 代码 中 06 行 通过 定义 补 白 和 背景 属性 显示 了 背景 图 片 ， 其 显示 效果 如 图 16-18 
所 示 。 如 果 更 改 补 白 属性 的 属性 值 , 则 背景 图 片 无 法 正常 显示 。 将 补 白 属性 的 值 均 定义 为 60px， 
则 页 面 的 显示 效果 如 图 16-19 所 示 。 
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16-18 补 白 属性 中 显示 背景 的 效果 


到 
了 EE 妆 mi 3 


16-19 更 改 补 白 属性 值 的 显示 效果 


36.5 | 元 素 的 边框 


元 素 的 边框 ， 


一 般 用 来 起 到 分 隔 页 面 各 个 部 分 的 效果 。 在 CSS 中 ， 边 框 属性 可 以 分 为 以 


下 几 个 属性 。 包 括 边框 样式 (border-style)、 边 框 宽 度 (border-widthb)、 边 框 颜色 (border-coloD、 边 
框 样式 (border-style) 以 及 边框 综合 属性 (border) 等 。 

在 CSS 中 ， 可 以 分 别 定义 每 一 侧 边框 的 样式 。 在 每 一 侧 的 边框 样式 中 ， 同 样 可 以 定义 边 
框 的 样式 、 宽 度 、 颜 色 等 ， 下 面 分 别 进行 讲解 。 


16.5.1 


顶部 边框 样式 属性 border-top-style 


顶部 边框 样式 属性 (bordertop-style) 用 来 定义 元 素 项 部 边框 的 显示 效果 。 在 顶部 边框 样式 属 
性 中 ， 可 以 使 用 的 取 值 有 很 多 ， 其 中 有 部 分 取 值 还 不 被 浏览 器 所 支持 。 其 语法 结构 如 下 所 示 。 


border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset; 


其 中 各 个 属性 的 含义 如 下 所 示 。 
none: 没有 边框 。 
hidden: 隐藏 边框 。 
dotted: 边框 为 点 线 。 
dashed: 边框 为 虚线 。 
solid: 边框 为 实 线 。 
double: 边框 为 双 线 。 
groove: 边框 为 3d 四 槽 。 
ridge: 边框 为 萎 形 。 
inset: 边框 为 3d 四 边 。 
outset: 边框 为 34 凸 边 。 


VvvVvYvyvyvyvyvyvyv 


以 上 的 几 个 属性 中 ，groove、ridge、inset、outset4 个 属性 值 的 显示 效果 ， 要 受到 
边框 颜色 属性 (border-color) 的 影响 , 下 浏览 器 并 不 支持 这 4 个 属性 值 . 同时 契 浏 览 器 
也 不 支持 hidden 属性 值 . 


03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 


10 </style> 
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11 </head> 

12 <body> 
<div class="dashed"></div> 
<div class="double"></div> 
<div class="ridge"></div> 
</body> 

13 <htm> 


在 以 上 的 代码 中 ，06 到 08 行 分 别 定义 了 3 种 不 同 的 顶部 边框 样式 。 同 时 09 行 定义 了 元 
素 的 宽度 、 高 度 ， 以 及 边框 的 颜色 和 宽度 属性 ， 用 来 显示 元 素 边框 样式 。 以 上 代码 的 显示 效果 
如 图 16-20 所 示 。 
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图 16-20 顶部 补 白 属性 的 显示 效果 


也 注意 


本 ”如 果 要 显示 边框 的 样式 ， 就 必须 要 定义 边框 的 颜色 属性 和 宽度 属性 。 否则 元 素 的 
边框 无 法 显示 。 


16.5.2” 右 侧 边 框 样式 属性 border-right-style 


右 侧 边 框 样式 属性 (border-right-style) 用 来 定义 元 素 右 侧 边框 的 显示 效果 。 在 右 侧 边框 样式 
属性 中 , 可 以 使 用 的 取 值 有 很 多 , 其 中 有 部 分 取 值 还 不 被 浏览 器 所 支持 。 其 语法 结构 如 下 所 示 。 


border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset: 


其 中 各 个 属性 值 的 含义 参见 16.5.1 小 节 的 相关 内 容 。 
下 面 是 一 个 使 用 右 侧 边框 样式 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wloka border-right-style.html 
01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content—"text/html: charset—utf-8" /> 
04 ”<tile> 无 标题 文档 </title> 
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在 以 上 的 代码 中 ，06 和 07 行 分 别 定义 了 两 种 不 同 的 右 侧 边框 样式 。 同 时 08 行 定义 了 元 
素 的 宽度 值 小 于 高 度 值 ， 以 及 边框 的 颜色 、 宽 度 属性 和 浮动 属性 ， 其 目的 是 用 来 显示 元 素 边框 
样式 。 以 上 代码 的 显示 效果 如 图 16-21 所 示 。 
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16-21 右 侧 边框 属性 的 显示 效果 


16.5.3 ”底部 边框 样式 属性 border-bottom-style 


底部 边框 样式 属性 (border-bottom-style) 用 来 定义 元 素 底 部 边框 的 显示 效果 。 在 底部 边框 样 
式 属性 中 ， 可 以 使 用 的 取 值 有 很 多 ， 其 中 有 部 分 取 值 还 不 被 浏览 器 所 支持 。 其 语法 结构 如 下 
所 示 。 


border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset: 


其 中 各 个 属性 值 的 含义 参见 16.5.1 小 节 的 相关 内 容 。 


一 


下 面 是 一 个 使 用 底部 边框 样式 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wb border-bottom-style.html 


01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 .dotted{ 
border-bottom-style:dotted;} 


在 以 上 的 代码 中 ，06 和 07 行 分 别 定义 了 两 种 不 同 的 底部 边框 样式 。 同 时 08 行 定义 了 元 
素 的 宽度 、 高 度 ， 以 及 边框 的 颜色 和 宽度 属性 ， 其 目的 是 用 来 显示 元 素 边框 样式 。 以 上 代码 的 


显示 效果 如 图 16-22 所 示 。 


图 16-22 ”底部 边框 样式 属性 的 显示 效果 


跟 我 学 HTML+CSS 


16.5.4” 左 侧 边框 样式 属性 border-left-style 


左 侧 边框 样式 属性 (borderleft-style) 用 来 定义 元 素 左 侧 边 框 的 显示 效果 。 在 左 侧 边 框 样式 属 
性 中 ， 可 以 使 用 的 取 值 有 很 多 ， 其 中 有 部 分 取 值 还 不 被 浏览 器 所 支持 。 其 语法 结构 如 下 所 示 。 

border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset: 

其 中 各 个 属性 值 的 含义 参见 16.5.1 小 节 的 相关 内 容 。 

下 面 是 一 个 使 用 左 侧 边框 样式 属性 的 实例 ， 其 代码 如 下 所 示 。 


border-left-style.html 

01 <htm> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 

04 ”<tite> 无 标题 文档 </title> 

05 <style> 

06 .dashed{ 
border-left-style:dashed:; 
} 

07 .solid{ 
border-left-style:solid; 
} 

08 .double{ 
border-left-style:double; 
} 

09 div{ 
float:left: 
border-left-color:#000000; 
border-top-width:5px; 
width:80px: 
height:150px: 
} 

10 </style> 

11 </head> 

12 <body> 
<div class="dashed"></div> 
<div class="solid"></div> 
<div class="double"></div> 

13 </body> 

14 </html> 


在 以 上 的 代码 中 ，06 到 08 行 分 别 定义 了 3 种 不 同 的 单 侧 边框 样式 。 同 时 09 行 定义 了 元 


素 的 宽度 、 高 度 ， 以 及 边框 的 颜色 、 宽 度 属性 和 浮动 属性 ， 其 目的 是 用 来 显示 元 素 边框 样式 。 
以 上 代码 的 显示 效果 如 图 16-23 所 示 。 
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图 16-23 左 侧 补 白 属性 的 显示 效果 


16.5.5 ”顶部 边框 颜色 属性 border-top-color 


顶部 边框 颜色 属性 (border-top-colon) 用 来 定义 元 素 顶 部 边框 的 颜色 。 顶 部 边框 颜色 属性 的 取 
值 为 颜色 值 ， 其 语法 结构 如 下 所 示 。 


border-top-color: color | colomame; 
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<title>css 属性 实例 </title> 


在 以 上 的 代码 中 ，07 行 定义 了 项 部 边框 的 颜色 为 黄色 。 同 时 定义 了 一 个 400pxX80px 的 
元 素 ， 以 及 边框 的 样式 和 宽度 属性 ， 目 的 是 用 来 显示 元 素 边框 颜色 。 以 上 代码 的 显示 效果 如 图 
16-24 所 示 。 


| 台 无 标题 六 着 - Wicrosof 


图 16-24 ”项 部 边框 颜色 属性 的 显示 效果 


16.5.6” 右 侧 边框 颜色 属性 border-right-color 


右 侧 边 框 颜色 属性 border-right-colonD 用 来 定义 元 素 右 侧 边框 的 颜色 。 右 侧 边 框 颜色 属性 的 
取 值 为 颜色 值 ， 其 语法 结构 如 下 所 示 。 


border-right-color: color | colomame': 
下 面 是 一 个 使 用 右 侧 边框 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl border-right-color.html 


04 ”<title> 无 标题 文档 </title> 
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<div></div> 
10 <body> 
11 </html> 
在 以 上 的 代码 中 ，06 行 定义 了 右 侧 边框 的 颜色 为 绿色 。 同 时 定义 了 元 素 的 宽度 、 高 度 ， 
以 及 边框 的 样式 和 宽度 属性 , 其 目的 是 用 来 显示 元 素 边框 颜色 。 以 上 代码 的 显示 效果 如 图 16-25 
所 示 。 


图 16-25 “ 右 侧 边框 颜色 属性 的 显示 效果 


16.5.7 “底部 边框 颜色 属性 border-bottom-color 


底部 边框 颜色 属性 (border-bottom-color) 用 来 定义 元 素 底部 边框 的 颜色 。 底 部 边框 颜色 属性 
的 取 值 为 颜色 值 ， 其 语法 结构 如 下 所 示 。 


border-bottom-color: color | colomame: 


下 面 是 一 个 使 用 底部 边框 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl border-bottom-color.html 

01 <html> 

02 <head> 

03 ”<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 div{ 
border-bottom-color: #FFFF00; 
border-bottom-style:solid; 
border-bottom-width:50px; 
width:300px: 
height:150px; 
b 

07 </style> 

08 </head> 

09 <body> 
<div></div> 
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10 </body> 
11 <htmP> 


在 以 上 的 代码 中 ，06 行 定义 了 底部 边框 的 颜色 为 黄色 。 同 时 定义 了 元 素 的 宽度 、 高 度 ， 
以 及 边框 的 样式 和 宽度 属性 , 其 目的 是 用 来 显示 元 素 边框 颜色 。 以 上 代码 的 显示 效果 如 图 16-26 


所 示 。 
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图 16-26 底部 边框 颜色 属性 的 显示 效果 


16.5.8” 左 侧 边 框 颜色 属性 border-left-color 


左 侧 边框 颜色 属性 (border-left-color) 用 来 定义 元 素 左 侧 边 框 的 颜色 , 左 侧 边框 颜色 属性 的 取 
值 为 颜色 值 ， 其 语法 结构 如 下 所 示 。 


border-left-color color | colomame': 
下 面 是 一 个 使 用 左 侧 边 框 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl border-left-color.html 


01 
02 
03 
04 
05 
06 


883 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 
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~ 
<div></div> 
10 </body> 
11 <html> 
在 以 上 的 代码 中 ，06 行 定义 了 左 侧 边框 的 颜色 为 黄色 。 同 时 定义 了 元 素 的 宽度 、 高 度 ， 
以 及 边框 的 样式 和 宽度 属性 , 其 目的 是 用 来 显示 元 素 边 框 颜色 。 以 上 代码 的 显示 效果 如 图 16-27 
所 示 。 
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16-27” 左 侧 边框 颜色 属性 的 显示 效果 


16.5.9 ”顶部 边框 宽度 属性 border-top-width 


顶部 边框 宽度 属性 (border-top-width) 用 来 定义 元 素 顶 部 边框 的 宽度 。 顶 部 边框 宽度 属性 中 
使 用 的 属性 值 为 长 度 值 以 及 medium、thin、thick 等 ， 其 语法 结构 如 下 所 示 。 


border-top-width: medium | thin | thick | length: 


其 中 各 个 属性 的 含义 如 下 所 示 。 
> medium: 默认 的 边框 宽度 。 
thin: 小 于 默认 的 边框 宽度 。 
> thick: 边框 将 使 用 加 粗 效果 。 
> length: 长 度 值 。 
下 面 是 一 个 使 用 顶部 边框 宽度 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl border-top-width.html 
01 <html> 


02 <head> 
03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 
05 <style> 
06 div{ 
border-top-width: thick: 
border-top-style:solid: 
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在 以 上 的 代码 中 ，06 行 定义 顶部 边框 宽度 值 为 thick， 此 时 边框 将 使 用 加 粗 效 果 。 以 上 代 
码 的 显示 效果 如 图 16-28 所 示 。 


2 | ||| | 
16-28 ”顶部 边框 宽度 属性 的 显示 效果 


16.5.10” 右 侧 边框 宽度 属性 border-right-width 


右 侧 边框 宽度 属性 (border-right-width) 用 来 定义 元 素 右 侧 边框 的 宽度 。 右 侧 边框 宽度 属性 中 
使 用 的 属性 值 为 长 度 值 以 及 medium、thin、thick 等 ， 其 语法 结构 如 下 所 示 。 


border-right-width: medium | thin | thick | length: 


其 中 各 个 属性 的 含义 参见 16.5.9 小 节 的 相关 内 容 。 
下 面 是 一 个 使 用 右 侧 边 框 宽度 属性 的 实例 ， 其 代码 如 下 所 示 。 


wal border-right-width.html 
01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
04 ”<tile> 无 标题 文档 </tite> 
05 <style> 
06 div{ 
border-right-width:thin: 
border-right-style:solid; 
width:120px: 
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在 以 上 的 代码 中 ，06 行 定 义 顶部 边框 宽度 值 为 hin， 此 时 边框 将 显示 细 线 的 效果 。 以 上 代 
码 的 显示 效果 如 图 16-29 所 示 。 


图 16-29 ” 右 侧 边框 宽度 属性 的 显示 效果 


16.5.11 ”底部 边框 宽度 属性 border-bottom-width 


底部 边框 宽度 属性 (border-bottom-width) 用 来 定义 元 素 底部 边框 的 宽度 。 底部 边框 宽度 属性 
中 使 用 的 属性 值 为 长 度 值 以 及 medium、thin、thick 等 ， 其 语法 结构 如 下 所 示 。 


border-bottom-width: medium | thin | thick | length: 


其 中 各 个 属性 的 含义 参见 16.5.9 小 节 的 相关 内 容 。 
下 面 是 一 个 使 用 底部 边框 宽度 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wb border-bottom-width.html 
01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 
05 <style> 
06 div{ 
border-bottom-width: medium: 
border-bottom-style:solid: 
width:300px: 
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11 <htm> 


在 以 上 的 代码 中 ，06 行 定义 底部 边框 宽度 值 为 默认 值 显示 ， 通 常 状况 下 实际 显示 的 值 为 
5px。 以 上 代码 的 显示 效果 如 图 16-30 所 示 。 


16-30 ”底部 边框 宽度 属性 的 显示 效果 


16.5.12” 左 侧 边框 宽度 属性 border-left-width 


左 侧 边框 宽度 属性 (border-left-width) 用 来 定义 元 素 左 侧 边框 的 宽度 。 左 侧 边框 宽度 属性 中 
使 用 的 属性 值 为 长 度 值 以 及 medium、thin、thick 等 ， 其 语法 结构 如 下 所 示 。 


border-left-width: medium | thin | thick | length: 


其 中 各 个 属性 的 含义 参见 16.5.9 小 节 的 相关 内 容 。 
下 面 是 一 个 使 用 左 侧 边 框 宽度 属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 16-28| border-left-width.html 


01 <htm> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </tite> 
05 <style> 
06 div{ 
border-left-width:40px: 
border-left-style:groove: 
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图 16-31 左 侧 边框 宽度 属性 的 显示 效果 


16.5.13 ”边框 样式 属性 border-style 


边框 样式 属性 (border-style) 用 来 统一 定义 边框 的 显示 样式 。 在 边框 样式 属性 中 ， 使 用 的 属 
性 值 和 相应 的 边框 单 侧 样式 属性 中 相同 。 


2 注意 


py 
使 用 边框 样式 属性 ， 无 法 定义 某 一 个 方向 上 边框 显示 独立 的 样式 效果 。 


01 <html> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=—utf-8" /> 
04 ”<title> 无 标题 文档 </title> 

05 <style> 


图 16-32 边框 样式 属性 的 显示 效果 


16.5.14 ”边框 颜色 属性 border-color 


边框 颜色 属性 (border-color) 用 来 统一 定义 边框 的 显示 颜色 。 在 边框 颜色 属性 中 ， 使 用 的 属 
性 值 为 颜色 值 。 


| 以 注意 
Lge 
使 用 边框 颜色 属性 ， 无 法 定义 某 一 个 方向 上 边框 显示 独立 的 颜色 效果 。 


下 面 是 一 个 使 用 边框 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tile> 无 标题 文档 </title> 
05 <style> 
06 div{ 
border-color: #FFFF33; 


在 以 上 的 代码 中 ，06 行 定 义 边 框 颜色 为 黄色 ， 边 框 宽 度 为 20 像素 ， 边 框 样式 为 点 线 。 代 
码 运 行 后 的 显示 效果 如 图 16-33 所 示 。 


seeeeeseee 
BE [lm DZ 
图 16-33 边框 颜色 属性 的 显示 效果 


16.5.15 ”边框 宽度 属性 border-width 


边框 宽度 属性 (border-width) 用 来 统一 定义 边框 的 显示 宽度 。 在 边框 宽度 属性 中 ， 使 用 的 属 
性 值 和 相应 的 边框 单 侧 宽度 属性 中 相同 。 


Pl 


使 用 边框 宽度 属性 ， 无 法 定义 菜 一 个 方向 上 边框 显示 独立 的 宽度 值 。 


下 面 是 一 个 使 用 边框 宽度 属性 的 实例 ， 其 代码 如 下 所 示 。 


border-width.html 
01 <htm> 
02 <head> 


03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </tide> 
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05 <style> 

06 div{ 
border-width:30px: 
border-style: double; 
width:300px; 
height:120px; 


07 </style> 

08 </head> 

09 <body> 
<div></div> 

10 </body> 

11 <html> 


加 无 标题 文 若 - 上 crese ft Internet Erploree 


在 以 上 的 代码 中 ，06 行 定义 边框 样式 为 双 线 。 代 码 运 行 后 的 显示 效果 如 图 16-34 所 示 。 


=lolxl 
ET 
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16-34 边框 宽度 属性 的 显示 效果 


16.5.16 ”边框 顶部 综合 属性 border-top 


边框 顶部 综合 属性 (border-top) 用 来 统一 定义 边框 顶部 的 显示 效果 。 边 框 顶部 综合 属性 是 边 
框 几 个 顶部 属性 的 简化 写法 , 其 中 使 用 的 依然 是 边框 样式 、 边框 宽度 、 边 框 颜色 等 几 个 属性 值 ， 
其 语法 结构 如 下 所 示 。 

border-top:border-top-style border-top-width border-top-color: 

在 边框 顶部 综合 属性 中 ， 所 有 的 背景 属性 值 之 间 ， 使 用 空格 分 隔 。 当 属性 值 的 顺序 发 生变 
化 时 ， 并 不 影响 边框 属性 的 显示 效果 。 

下 面 是 一 个 使 用 边框 顶部 综合 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wd border-top.html 


01 <htm> 
02 <head> 
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一 


03 ”<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 <title>css 属性 实例 </title> 


11 </html> 
在 以 上 的 代码 中 ，06 行 中 使 用 边框 项 部 综合 属性 ， 定 义 了 顶部 边框 的 宽度 为 20px， 颜 色 


为 黄色 ， 边 框 样式 为 双 线 。 同 时 定义 了 元 素 的 宽度 、 高 度 ， 用 来 显示 更 好 地 显示 元 素 的 边框 。 
以 上 代码 的 显示 效果 如 图 16-35 所 示 。 


池 无 标题 文档 - Nicrosoft Internet ERLSEE 


文件 中 编辑 中 查看 WD 收 疗 忆 工具 CD) 帮助 0 区 2 
Oi- © dW Pm um 加 | 
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16-35 边框 顶部 综合 属性 的 显示 效果 


16.5.17 ”边框 右 侧 综合 属性 border-right 


边框 右 侧 综合 属性 (borderrighb 用 来 统一 定义 边框 右 侧 的 显示 效果 。 边 框 右 侧 综合 属性 是 
边框 几 个 右 侧 属 性 的 简化 写法 ， 其 中 使 用 的 依然 是 边框 样式 、 边 框 宽度 、 边 框 颜色 等 几 个 属性 
值 ， 其 语法 结构 如 下 所 示 。 

border right:border- right -style border- right -width border right -color: 

在 边框 右 侧 综合 属性 中 ， 所 有 的 背景 属性 值 之 间 ， 使 用 空格 分 隔 。 当 属性 值 的 顺序 发 生变 


化 时 ， 并 不 影响 边框 属性 的 显示 效果 。 使 用 方法 和 边框 顶部 综合 属性 一 样 ， 这 里 就 不 举 实例 叙 
述 了 。 
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16.5.18 ”边框 底部 综合 属性 border-bottom 


边框 底部 综合 属性 (borderbottom) 用 来 统一 定义 边框 底部 的 显示 效果 。 边 框 底部 综合 属性 
是 边框 几 个 底部 属性 的 简化 写法 ， 其 中 使 用 的 依然 是 边框 样式 、 边 框 宽度 、 边 框 颜色 等 几 个 属 
性 值 ， 其 语法 结构 如 下 所 示 。 


border-bottom: border-bottom-style border-bottom-width border-bottom-color: 


在 边框 底部 综合 属性 中 ， 所 有 的 背景 属性 值 之 间 ， 使 用 空格 分 隔 。 当 属性 值 的 顺序 发 生变 
化 时 ， 并 不 影响 边框 属性 的 显示 效果 。 使 用 方法 和 边框 项 部 综合 属性 一 样 ， 这 里 就 不 举 实例 叙 
述 了 。 


16.5.19 边框 左 侧 综合 属性 border-left 


边框 左 侧 综合 属性 (border-left) 用 来 统一 定义 边框 左 侧 的 显示 效果 。 边 框 左 侧 综合 属性 是 边 
框 几 个 左 侧 属 性 的 简化 写法 , 其 中 使 用 的 依然 是 边框 样式 、 边框 宽度 、 边框 颜色 等 几 个 属性 值 ， 
其 语法 结构 如 下 所 示 。 


border-left: border-left-style border-left-width border-left-color: 


在 边框 左 侧 综合 属性 中 ,所 有 的 背景 属性 值 之 间 使 用 空格 分 隔 。 当 属性 值 的 顺序 发 生变 化 
时 , 并 不 影响 边框 属性 的 显示 效果 。 使 用 方法 和 边框 顶部 综合 属性 一 样 , 这 里 就 不 举 实例 叙述 了 。 


16.5.20 ”边框 综合 属性 border 


边框 综合 属性 (border) 用 来 统一 定义 所 有 边框 的 显示 效果 。 边 框 综合 属性 中 ， 使 用 的 依然 
是 边框 样式 、 边 框 宽度 、 边 框 颜色 等 几 个 属性 值 。 其 语法 结构 如 下 所 示 。 


border:border-style border-width border-color: 


在 边框 综合 属性 中 , 所 有 的 背景 属性 值 之 间 , 使 用 空格 分 隔 。 当 属性 值 的 位 置 发 生变 化 时 ， 
并 不 影响 边框 的 显示 效果 。 
下 面 是 一 个 使 用 边框 综合 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl border.html 
01 <htm> 
02 <head> 
03 <meta http-equiv="Content-Type" conten{="text/html; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 div{ 
border:20px red double: 
width:300px: 
height:90px; 
} 
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在 以 上 的 代码 中 ，06 行 中 使 用 边框 综合 属性 ， 定 义 了 边框 的 宽度 为 20px， 颜 色 为 红色 ， 
边框 样式 为 双 线 。 同 时 定义 了 元 素 的 宽度 、 高 度 ， 用 来 显示 更 好 地 显示 元 素 的 边框 。 以 上 代码 
的 显示 效果 如 图 16-36 所 示 。 


文件 ”编辑 下 ) 查看 WW) 收藏 和 ) 工具 I) 和 帮助 0 


Ons ©- A | 
We)r: 


[SE 4 
16-36 边框 综合 属性 的 显示 效果 


96.6, 元 素 的 边界 


元 素 的 边界 ， 用 来 分 隔 元 素 和 与 其 相 邻 的 元 素 。 在 CSS 中 ， 边 界 属性 分 为 4 个 单 侧 边 界 
属性 ， 包 括 顶 部 边界 属性 (margin-top)、 右 边界 属性 (margin-right)、 下 边界 属性 (margin-bottom)、 
左边 界 属性 (margin-left)、 以 及 边界 综合 属性 (margin) 等 。 

在 CSS 中 ， 可 以 独立 定义 某 个 边界 的 属性 值 ， 也 可 以 统一 定义 所 有 边界 的 属性 值 ， 下 面 
分 别 进行 讲解 。 


16.6.1 ”顶部 边界 属性 margin-top 


顶部 边界 属性 (margin-top) 用 来 定义 元 素 顶 部 边界 的 显示 效果 。 在 顶部 边界 属性 中 ,可 以 使 
用 长 度 值 、 百 分 比值 和 auto 值 。 其 语法 结构 如 下 所 示 。 


margin-top: length | precent | auto; 


跟 我 学 HTML+CSS 


ea 


及 注意 


如 果 在 单 侧 边 界 属性 中 使 用 百分比 属性 值 ， 则 最 终 的 取 值 ， 取决 于 父 元 素 中 定义 


rr 容 ， 将 在 后 面 的 16.7 节 中 详细 讲解 )。 


下 面 是 一 个 使 用 项 部 边界 属性 的 实例 ， 其 代码 如 下 所 示 。 
margin-top.html 


01 
02 
03 
04 
05 


Yh 
12 


在 以 上 的 代码 中 ，06 和 07 行 中 分 别 定义 顶部 
边界 属性 值 为 50px。 同时 定义 了 元 素 的 宽度 、 高 度 ， | 四起 由 只 于 | 


以 及 边框 的 宽度 、 颜 色 、 样 式 等 属性 ， 其 目的 是 用 (gro rw nme 加 


来 显示 元 素 边界 属性 的 效果 。 以 上 代码 的 显示 效果 
ma7 ii [| | 
Le [| | 


右 侧 边界 属性 (margin-righb 用 来 定义 元 素 右 侧 
边界 的 显示 效果 。 在 右 侧 边 界 属性 中 ， 可 以 使 用 长 
度 值 、 百 分 比值 和 auto 值 。 其 语法 结构 如 下 所 示 。 
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<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

top 


border:2px red solid; 
width:300px: 
height:50px; 


.bottom 


margin-top:50px; 
border:2px #000000 solid; 
width:300px: 
height:50px: 


<div class="top"></div> 
<div class="bottom"></div> 
</body> 

</html> 


| 淄 无 标题 文 若 - Microsoft Internet Exp1oree 


和 


坊 


Or Oe | 


EER 
图 16-37 ”顶部 边界 属性 的 显示 效果 
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margin- right: length | precent | auto; 
下 面 是 一 个 使 用 右 侧 边界 属性 的 实例 ， 其 代码 如 下 所 示 。 
margin-right.html 


01 <html> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 了 
{ 
margin-right:80px; 
border:4px #000000 solid; 
background:yellow; 
width:300px: 
height:50px: 


07 main 
border:4px #000000 double; 


08 </style> 
09 </head> 
10 <body> 
<div class="main"> 
<div class="in"></div></div> 
11 </body> 
12 </html> 


在 以 上 的 代码 中 ，06 和 07 行使 用 了 媒 套 的 <div> 元 素 。 在 内 部 的 <div> 元 素 中 ， 定 义 右 侧 
边界 属性 值 为 80px。 同 时 定义 了 元 素 的 宽度 、 高 度 ， 以 及 边框 的 宽度 、 颜 色 、 样 式 等 属性 ， 其 


目的 是 用 来 显示 元 素 边界 属性 的 效果 。 以 上 代码 的 显示 效果 如 图 16-38 所 示 。 
加 无 标题 文档 - Mieresoft Inter 

文件 四 查看 由 收 训 W) I 上 WD) lm | 需 | 
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地 址 WW | 生 ]D: wy becoments\lTUatitled-35 .htnl EE 


net Erplorer 
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图 16-38 右 侧 边界 属性 的 显示 效果 
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16.6.3 ”底部 边界 属性 margin-bottom 


底部 边界 属性 (margin-bottom) 用 来 定义 元 素 底部 边界 的 显示 效果 。 在 底部 边界 属性 中 ， 可 


以 使 用 长 度 值 、 百 分 比值 和 auto 值 。 其 语法 结构 如 下 所 示 。 


margin-bottom: length | precent | auto; 


下 面 是 一 个 使 用 底部 边界 属性 的 实例 ， 其 代码 如 下 所 示 。 


bl margin-bottom .html 


01 <html> 
02 <head> 
03 ”<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 
05 <style> 
06 吕 
4 
margin-bottom: 1 00px: 
border:4px #000000 solid:; 
background:yellow; 
width:300px; 
height:80px; 
} 
07 main 
{ 
height:80px: 
border:4px #000000 dotted: 
} 
08 </style> 
09 </head> 
10 <body> 
<div class="main"> 
<div class="in"></div></div> 
11 </body> 
12 <html> 


在 以 上 的 代码 中 ， 使 用 了 媒 套 的 <div> 元 素 。06 行 在 内 部 的 <div> 元 素 中 ， 定 义 底部 边界 属 


性 值 为 100px。 同 时 定义 了 元 素 的 宽度 、 高 度 ， 以 及 边框 的 宽度 、 颜 色 、 样 式 等 属性 ， 其 目的 
是 用 来 显示 元 素 边界 属性 的 效果 。 以 上 代码 的 显示 效果 如 图 16-39 所 示 。 


[| 


” 户 注 意 


| 
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在 下 6.0 中 ， 一定 要 定义 父 元 素 的 高 度 ， 否 则 子 元 素 的 底部 边界 属性 值 将 无 法 显 
示 ( 关 于 0 边界 的 问题 ， 在 16.7 节 中 将 详细 讲解 )。 


CSS 控制 元 素 的 大 小 


是 文档 ose n =| 口 x| 
文件 编辑 下 ) 查看 W) 收 豪 和 ) 工具 CD) 帮助 o EY 
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于 在 0) | 外] n: wy Documents\iT\ Untitled-36. htnl EE 
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图 16-39 ”底部 边界 属性 的 显示 效果 


16.6.4” 左 侧 边 界 属性 margin-left 


左 侧 边 界 属性 (margin-left) 用 来 定义 元 素 左 侧 边界 的 显示 效果 。 在 左 侧 边 界 属性 中 , 可 以 使 
用 长 度 值 、 百 分 比值 和 auto 值 。 其 语法 结构 如 下 所 示 。 


margin-left: length | precent | auto; 
下 面 是 一 个 使 用 左 侧 边界 属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 16-37| margin-left.html 


01 <html> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 

04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 div 
1 
margin-left:100px; 
border:2px #000000 solid: 
background:yellow:; 
width:300px: 
height:150px: 
} 

07 main 
{ 
height:80px: 
border:4px #000000 dotted; 
} 

08 </style> 

09 </head> 

10 <body> 
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<div class="main"> 
11 </body> 
12 <html> 


在 以 上 的 代码 中 ，06 行 在 <div> 元 素 中 ， 定 义 左 侧 边界 属性 值 为 100px。 同 时 定义 了 元 素 
的 宽度 、 高 度 ， 以 及 边框 的 宽度 、 颜 色 、 样 式 等 属性 ， 其 目的 是 用 来 显示 元 素 边界 属性 的 效果 。 
以 上 代码 的 显示 效果 如 图 16-40 所 示 。 


加 无 标题 文档 - Microsoft Internet Explorer -lolx| 
文件 如 ”编辑 如 ”查看 收藏 办。 工具 CD) 天 助人 | 心 


Qn: © HAW) Hm O|D- ea- 


号 址 0) [ 色 ] D: wy Docoments\17\Untitled-37 html BE 


SE EC 引 
16-40 ” 左 侧 边界 属性 的 显示 效果 


16.6.5 ”边界 综合 属性 margin 


边界 综合 属性 (margin) 用 来 统一 定义 边界 的 显示 效果 。 在 边界 综合 属性 中 ， 可 以 使 用 长 度 
值 、 百 分 比值 和 auto 值 。 其 语法 结构 如 下 所 示 。 

margin: length | precent | auto; 
| 
”如果 在 边界 综合 属性 中 使 用 百分比 属性 值 ， 则 最 终 的 取 值 取决 于 父 元 素 中 定义 的 
元 素 宽度 (关于 父 元 素 的 具体 内 容 ， 将 在 16.7 节 中 详细 讲解)， 


下 面 是 一 个 使 用 边界 综合 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl example.html 
01 <html> 
02 <head> 
03 ”<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
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<div class="main"><div class="include"></div></div> 

11 </body> 

12 </html> 

在 以 上 的 代码 中 ， 使 用 了 顽 套 的 <div> 元 素 。06 行 在 内 部 的 <div> 元 素 中 ， 定义 边界 综合 属 
性 值 为 60px。 同 时 定义 了 元 素 的 宽度 、 高 度 ， 以 及 边框 的 宽度 、 颜 色 、 样 式 等 属性 ， 其 目的 是 
用 来 显示 元 素 边 界 属性 的 效果 。 以 上 代码 的 显示 效果 如 图 16-41 所 示 。 


16.6.6 ”边界 与 背景 


在 元 素 的 边界 部 分 ,不 会 显示 元 素 本 身 定义 的 背景 颜色 或 者 背景 图 片 , 但 是 可 以 显示 父 元 
素 中 定义 的 背景 颜色 或 背景 图 片 。 
下 面 是 一 个 关于 边界 与 背景 属性 的 实例 ， 其 代码 如 下 所 示 。 


| example.html 
01 <html> 
02 <head> 

03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 .include{f 

margin:60px; 
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background:red; 
width:300px: 

height:60px; 

} 
07 main{ 

border:2px #000000 dotted: 

background:yellow: 

width:60px: 

b 
08 </style> 
09 </head> 
10 <body> 

<div class="main"><div class="include"></div></div> 
11 </body> 
12 </html> 


以 上 的 代码 中 ，06 行 在 子 元 素 <div> 标 签 中 定义 边界 属性 值 为 60px， 背 景 颜 色 为 红色 。 在 
父 元 素 中 定义 背景 颜色 为 黄色 。 此 时 在 自 元 素 的 边界 区 域 会 显示 父 元 素 的 背景 ， 其 页 面 的 显示 
效果 如 图 16-42 所 示 。 


16-42 边界 区 域 显示 父 元 素 背景 的 效果 


96.7 | 嵌 套 元 素 的 大 小 和 距离 


在 嵌 套 的 元 素 中 ， 由 于 父 元 素 和 子 元 素 中 都 可 以 使 用 边界 和 补 白 属性 ， 所 以 元 素 属性 之 间 
会 互相 影响 。 在 不 同 的 浏览 器 中 ， 对 这 种 影响 也 有 不 同 的 解释 。 本 章 将 讲解 在 正 6.0 版 本 中 ， 
嵌 套 元 素 之 间 的 关系 。 


16.7.1” 父 元 素 和 子 元 素 


在 使 用 元 素 制作 页 面 的 时 候 ， 通 常会 遇 到 某 一 个 元 素 中 包含 另 一 个 元 素 的 情况 。 通 常 称 被 
包含 的 元 素 为 子 元 素 ， 包 含 子 元 素 的 元 素 为 父 元 素 。 
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在 默认 的 情况 下 ， 在 子 元 素 中 定义 的 相关 属性 ， 会 影响 父 元 素 的 显示 效果 。 同 时 在 父 元 素 
中 定义 的 属性 ， 也 可 以 制约 子 元 素 的 显示 效果 。 下 面 是 包含 子 元 素 和 父 元 素 的 实例 ， 其 代码 如 


下 所 示 。 


Lt) example html 


01 
02 
03 
04 
05 
06 


07 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

main{ 

background:yellow; 

width:50px;} 

‘include{ 

width:300px: 

height:150px: 

} 

</style> 

</head> 

<body> 

<div class="main"><div class="include"></div></div> 
</body> 

</html> 


以 上 的 代码 中 ，06 行 定义 父 元 素 的 背景 颜色 为 黄色 ， 宽 度 为 50px。07 行 子 元 素 的 宽度 为 
300px， 高 度 为 150px。 此 时 ， 由 于 子 元 素 的 宽度 大 于 父 元 素 的 宽度 ， 所 以 最 终 父 元 素 的 宽度 会 
和 子 元 素 相同 。 由 于 父 元 素 中 未 定义 高 度 ， 父 元 素 的 高 度 将 显示 子 元 素 的 高 度 。 由 于 子 元 素 中 
未 定义 背景 ， 所 以 显示 父 元 素 中 的 背景 。 以 上 代码 的 显示 效果 如 图 16-43 所 示 。 


习 无 标题 文档 - icrosoft Internet Erplere _=|D|x| 
文件 如 ”编辑 人 E) 查看 WD 收 蕊 直 工具 QD 帮助 0D 三 


四 银 - 辐 -四 加 区 | 万 时 | 亦 sm 加 ”| 


Er MiT\ntitled-40. htal | > 有 


Ci mrer 


图 16-43 ” 钳 套 元 素 的 显示 效果 


16.7.2 子 元 素 中 使 用 边界 属性 ， 父 元 素 未 定义 大 小 
当 子 元 素 中 使 用 边界 属性 ， 同 时 父 元 素 未 定义 大 小 的 时 ,在 正 6.0 中 ， 父 元 素 和 子 元 素 之 
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间 在 垂直 方向 上 ， 边 界 属性 将 无 法 正常 显示 。 
下 面 是 子 元 素 中 使 用 边界 属性 ， 而 父 元 素 未 定义 大 小 的 实例 ， 其 代码 如 下 所 示 。 


bl example.html 


01 <html> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 
05 <style> 
06 .main{ 
border:4px double red:} 
07 .include{ 
margin:60px; 
border:2px solid yellow:; 
width:300px; 
height:60px: 


} 
08 </style> 
09 </head> 
10 <body> 
<div class="main"><div class="include"></div></div> 
11 </body> 
12 </html> 


以 上 的 代码 中 , 07 行 在 子 元 素 中 定义 | 
、 a , 一 | 文件 四 名模) 查看 W) 收 革 工具 I) 和 助 ) 
了 边界 属性 为 60px, 同时 定义 了 子 元素 的 。 | 时 


大 小 为 300pxX60px， 边 框 属性 值 为 黄色 。 十 下风 peernauavet hi EEE 
实 线 边框 ， 边 框 宽度 为 2px。06 行 在 父 元 1 
素 中 定义 了 边框 属性 什 为 红色 双 线 边框 ， [| | 
边框 宽度 为 4px。 

由 于 下 6.0 浏览 器 对 CSS 的 解释 不 as 广 FFrFSEEE 于 
同 ， 所 以 在 下 60 中 ， 子 元 素 与 父 元 素 在 图 1644 JE60 中 实例 的 显示 效果 


垂直 方向 上 无 法 显示 定义 的 边界 属性 。 以 
上 代码 的 显示 效果 如 图 16-44 所 示 。 


16.7.3 ” 子 元 素 中 使 用 边界 属性 ， 父 元 素 中 使 用 补 白 属性 


当 子 元 素 中 使 用 边界 属性 ， 同 时 父 元 素 中 使 用 补 白 属性 的 时 候 ， 在 正 浏览 器 中 ， 元 素 顶 
部 会 将 子 元 素 的 边界 属性 和 父 元 素 的 补 白 属 性 值 重 又， 底部 会 将 子 元 素 的 边界 属性 和 父 元 素 的 
补 白 属性 值 相 加 。 

下 面 是 子 元 素 中 使 用 边界 属性 ， 父 元 素 中 使 用 补 白 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wl example.html 


01 <htm> 
02 <head> 
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03 <meta http-equiv="Content-Type" content—="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 


11 </body> 

12 </html> 

以 上 的 代码 中 ，07 行 在 子 元 素 中 定义 了 边界 属性 为 60px。06 行 父 元 素 中 定义 补 白 属性 为 
60px。 由 于 正 6.0 浏览 器 对 CSS 的 解释 不 同 , 所 以 在 正 6.0 中 , 以 上 代码 的 显示 效果 如 图 16-45 
所 示 。 


图 16-45 正 6.0 中 实例 的 显示 效果 


36.8| 本 章 习 题 


一 、 选 择 题 
1， 以 下 关于 内 容 与 宽度 、 高 度 属性 的 关系 说 法 中 ， 错 误 的 是 : ( ) 
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. 高 度 和 宽度 固定 后 ， 不 论 内 容 多 少 都 不 会 改变 他 们 的 大 小 。 

. 高 度 和 宽度 固定 后 ， 内 容 过 多 时 会 改变 他 们 的 大 小 。 

语句 {height:80px;} 这 里 定义 页 面 的 高 度 为 80px。 内 容 超过 这 个 高 度 时 ， 高 度 会 增加 。 
语句 { width:200px:} 这 里 定义 页 面 的 高 度 为 200px。 内 容 超过 这 个 长 度 会 换行 。 

用 于 设置 元 素 内 容 显示 宽度 的 属性 是 ( )。 

A.Size B MaxLength C.Value D. width 

3. 表示 内 容 和 边框 之 间 的 距离 的 属性 是 ( )。 

A<margin> B.<padding> C.<border> D.<object> 

4. 若 要 在 网 页 中 内 容 和 边框 之 间 的 上 下 之 间距 离 为 20px， 左 右 之 间 的 距离 为 30px， 以 下 
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代码 中 ， 正 确 的 是 (。 )。 


A. <margin 20px 0 20px 0;> 

B. <margin 20px 30px:> 

C. <padding 20px 0 20px 0:> 

D. <padding 20px 30px:> 

5 使 元 素 背 景 图 片 随 浏览 器 滚 条 的 拖 动 而 滚动 的 属性 是 ( 。 )。 
A.scroll B.fixed C.center D.no-repeat. 

6. 使 元 素 外 边 距 上 下 为 5spx， 左 右 为 10px， 以 下 代码 中 ， 正 确 的 是 (。 )。 
A. <margin Spx 0 10px 0:> 

B. <margin Spx 10px:> 

C. <padding Spx 0 10px 0:> 

D.<padding Spx 10px:> 

二 、 填 空 题 


1. <background:url(images/round.jpg) repeat-x center #cccccc;> 这 段 代 码 表示 的 意思 是 


2.<padding:20px 30px 40px 50px:> 表 示 ， <padding:20px 30px 40px:> 表 示 
3. <border:12px #ffff03 double:> 表 示 

4.<margin:60px:> 表 示 

三 、 实 战 练习 


1. 制作 一 个 页 面 ， 要 求 边框 宽度 为 4px， 外 边 距 为 左右 20px， 上 下 5px， 补 白 为 50px。 
2. 制作 一 个 页 面 ， 要 求 背景 图 片 随 浏 览 器 滚 条 的 拖 动 而 滚动 。 


gf 
CSS 辛 制 元 素 的 定位 


在 CSS 中 ， 可 以 通过 定位 属性 控制 元 素 的 显示 位 置 。 使 用 定位 属性 可 以 设置 元 素 的 重 叠 、 
相对 位 置 等 ， 也 可 以 制作 出 各 种 特殊 的 显示 效果 。 在 CSS 中 ， 可 以 使 用 绝对 定位 属性 值 和 相对 
定位 属性 值 对 内 容 进行 合理 的 安排 。 


全、 本章 主要 内 容 有 : 


@ ”掌握 元 素 定位 的 方法 。 
@ ”重点 理解 绝对 定位 和 相对 定位 。 
@ ”学 会 合理 地 重 登 定位 元 素 。 
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7- 了 | 元 素 的 定位 


在 网 页 中 ， 如 果 元 素 中 未 定义 任何 定位 和 布局 属性 ， 元 素 会 按照 各 自 默认 的 方式 排列 。 块 
元 素 会 按照 换行 的 方式 显示 ， 内 联 元 素 会 按照 同行 的 方式 显示 。 通 过 使 用 定义 属性 ， 可 以 将 元 
素 定义 到 任何 需要 显示 的 位 置 。 


17.1.1 ”元素 的 定位 属性 position 


元 素 的 定位 属性 (position) 用 来 定义 元 素 的 定位 方式 。 在 定位 属性 中 , 可 以 使 用 4 种 属性 值 ， 
分 别 为 static、absolute、fixed 和 relative， 其 语法 结构 如 下 所 示 。 


position : static | absolute | fixed | relative; 


其 中 每 个 属性 值 的 含义 ， 如 下 所 示 。 

> static: 默认 值 ， 元 素 按照 自身 默认 的 方式 显示 。 

> absolute: 绝对 定位 ， 以 有 含有 定位 属性 的 父 元 素 为 基准 ， 按 照 边 偏 移 属性 中 定义 的 属 
性 值 显示 。 

> fixed: 浏览 器 不 支持 该 属性 。 

> relative: 相对 定位 ， 元 素 以 自身 位 置 为 基准 ， 按 照 边 偏 移 属性 中 定义 的 属性 值 显 示 。 

下 面 是 一 个 使 用 元 素 的 定位 属性 的 实例 ， 其 代码 如 下 所 示 。 


We position.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title 元 素 的 定位 属性 实例 </tile> 
05 <style> 
06 div{ 
position: relative; 
left:200px: 
top:50px; 
border:3px solid #333333; 
width:400px: 
height:S0px: 
} 
07 </style> 
08 </head> 
09 <body> 
10 ”<div> 这 是 一 个 使 用 定位 属性 position 中 relative 的 实例 ， 在 使 用 定位 属性 的 时 候 ， 还 要 使 用 其 他 的 辅 
助 属性 ， 才 能 正常 显示 。</div> 
11 </body> 
12 </html> 
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一 
以 上 的 代码 中 ，06 行 定义 了 元 素 的 定位 属性 值 为 相对 定位 ， 使 用 边 偏 移 属性 确定 元 素 左 
侧 偏 移 值 为 200px， 顶 部 偏 移 值 均 为 50px。 此 时 元 素 将 以 自身 位 置 为 基准 ， 按 照 边 偏 移 属 性 中 
定义 的 属性 值 显示 ， 其 显示 效果 如 图 17-1 所 示 。 


17-1 定位 属性 的 显示 效果 


17.1.2 ”上 边 偏 移 属性 top 


元 素 的 上 边 偏 移 属性 (top) 用 来 定义 元 素 项 部 偏 移 位 置 的 大 小 。 在 上 边 偏 移 属性 中 ， 可 以 使 
用 的 属性 值 为 默认 、 长 度 值 、 百 分 比 ， 其 语法 结构 如 下 所 示 。 


top:auto | length | percent: 


使 用 百分比 值 的 时 候 ， 只 有 在 定义 元 素 定 位 属性 值 为 绝对 定位 (absolute) 或 者 相对 


定位 (relative) 的 时 候 ， 才 能 正常 显示 . 


下 面 是 一 个 使 用 上 边 偏 移 属性 的 实例 ， 其 代码 如 下 所 示 。 
| 例 程 17-2 莉 史 ul 


17 
01 <html xmins="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 ”<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tile> 无 标题 文档 </tile> 
05 <style> 
06 div{ 
top:20%; 
position:absolute; 
border:4px solid #000000: 
background:#FFFFO0; 
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height:200px:; 
} 
07 </style> 
08 </head> 
09 <body> 
<div> 这 是 使 用 项 部 边 偏 移 属性 的 实例 。</div> 
10 </body> 
11 <htm> 


以 上 的 代码 中 ，06 行 定 义 <div> 元 素 的 顶部 的 偏 移 值 为 20%， 同 时 定义 了 元 素 的 定位 属性 


值 为 绝对 定位 。 此 时 ， 元 素 垂直 方向 上 会 以 <body> 元 素 的 顶部 为 基准 显示 。 以 上 代码 的 显示 效 
果 ， 偏 移 的 宽度 大 概 是 整个 页 面 宽度 的 20%。 如 图 17-2 所 示 。 


文件 四 编辑 中 查看 WV) 收 菩 内。 工具 四 帮助 中 
Qi. Od NP Hin 加 | 


地 址 @) | 多] 0: Wy Docunents\18\ntitled-2. htal 了 ] 加 # 双 外科 


ls 


Ty copster 
图 17-2 上边 偏 移 属性 的 显示 效果 


17.1.3 ”右边 偏 移 属性 right 


元 素 的 右边 偏 移 属 性 (right) 用 来 定义 元 素 右 侧 偏 移 位 置 的 大 小 。 在 右边 偏 移 属性 中 ， 可 以 
使 用 的 也 是 为 默认 、 长 度 值 、 百 分 比 ， 其 语法 结构 如 下 所 示 。 


Tight:auto | length | percent; 


在 使 用 右边 偏 移 属 性 的 时 候 ， 如 果 未 定义 左边 偏 移 属 性 ， 则 元 素 的 显示 位 置 将 根据 浏览 器 
窗口 的 大 小 改变 而 改变 。 
下 面 是 一 个 使 用 右边 偏 移 属性 的 实例 ， 其 代码 如 下 所 示 。 


right html 
01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 
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04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 div{ 
Tight:100px; 
position:absolute: 
border:4px solid #00000; 
background:#666666; 
width:200px: 
height:100px; 
} 

07 </style> 

08 </head> 


<body> 
<div> 这 是 使 用 右边 偏 移 属性 的 实例 。</div> 


10 = </body> 
11 </html> 


以 上 的 代码 中 ，06 行 定义 <div> 元 素 的 右边 偏 移 值 为 100px， 同 时 定义 了 元 素 的 定位 属性 
值 为 绝对 定位 。 此 时 , 元 素 在 水 平方 向 上 会 以 <body> 元 素 的 右 侧 为 基准 显示 。 以 上 代码 运行 后 ， 


在 不 同 大 小 的 浏览 器 窗口 中 的 显示 效果 ， 如 图 17-3 和 图 17-4 所 示 。 
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SEE 
图 17-3 ”右边 偏 移 属性 的 显示 效果 1 图 17-4 右边 偏 移 属 性 的 显示 效果 2 


EE FT 


17.1.4 ”下边 偏 移 属性 bottom 


元 素 的 下 边 偏 移 属性 (bottom) 用 来 定义 元 素 底 部 偏 移 位 置 的 大 小 。 在 下 边 偏 移 属 性 中 ， 可 


以 使 用 的 属性 值 也 有 默认 、 长 度 值 、 百 分 比 ， 其 语法 结构 如 下 所 示 。 


top:auto | length | percent: 


在 使 用 下 边 偏 移 属性 的 时 候 ， 如 果 未 定义 上 边 偏 移 属性 ， 则 元 素 的 显示 位 置 将 根据 浏览 器 


窗口 的 大 小 改变 而 改变 。 
下 面 是 一 个 使 用 下 边 偏 移 属性 的 实例 ， 其 代码 如 下 所 示 。 
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EE bottom html 


01 <html xmins="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tille> 无 标题 文档 </title> 
05 <style> 
06 div{ 
bottom:5O0px; 
position:absolute; 
border:3px solid #000000; 
background:#FF33CC: 
idth:200px; 
} 
07 </style> 
08 </head> 


<body> 
<div> 这 是 使 用 下 边 偏 移 属 性 的 实例 。</div> 
10 </body> 
11 </html> 


以 上 的 代码 中 ，06 行 定 义 <div> 元 素 的 下 边 偏 移 值 为 50px， 同 时 定义 了 元 素 的 定位 属性 值 
为 绝对 定位 。 此 时 ， 元 素 在 垂直 方向 上 会 以 <body> 元 素 的 底部 为 基准 显示 。 以 上 代码 运行 后 ， 


在 不 同 大 小 的 浏览 器 窗口 中 的 显示 效果 ， 如 图 17-5 和 图 17-6 所 示 。 


图 17-5 下边 偏 移 属性 的 显示 效果 1 图 17.6 ”下边 偏 移 属性 的 显示 效果 2 


17.1.5 “左边 偏 移 属性 left 


元 素 的 左边 偏 移 属性 (ef 用 来 定义 元 素 左边 偏 移 位 置 的 大 小 。 在 左边 偏 移 属性 中 ， 可 以 使 


用 的 属性 值 也 有 默认 、 长 度 值 、 百 分 比 ， 其 语法 结构 如 下 所 示 。 
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人 


jleftauto | length | percent: 
下 面 是 一 个 使 用 左边 偏 移 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wb left.html 
01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 ”<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 <title> 无 标题 文档 </title> 
05 <style> 
06 div{ 


07 </style> 
08 </head> 
09 <body> 
<div> 这 是 使 用 左边 偏 移 属性 的 实例 。</div> 
10 </body> 
11 <html> 


以 上 的 代码 中 ，06 行 定义 <div> 元 素 左边 偏 移 值 为 200px， 同 时 定义 了 元 素 的 定位 属性 值 


为 绝对 定位 。 此 时 ， 元 素 在 水 平方 向 上 会 以 <body> 元 素 的 左 侧 为 起 点 显示 。 以 上 代码 的 显示 效 
果 ， 如 图 17-7 所 示 。 
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17-7 左边 偏 移 属性 的 显示 效果 


P73 绝对 定位 
绝对 定位 ， 用 来 确定 元 素 相对 定义 父 元 素 的 绝对 位 置 。 在 页 面 中 ， 使 用 绝对 定位 的 元 素 ， 
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会 从 文档 中 独立 地 显示 出 来 ， 所 以 使 用 绝对 定位 的 元 素 可 能 会 遮盖 其 他 的 页 面 元 素 。 下 面 分 别 
进行 讲解 。 

17.2.1 绝对 定位 与 父 元 素 


在 使 用 绝对 定位 的 时 候 ， 定 位 的 参照 元 素 ， 是 包含 定位 属性 的 父 元 素 。 如 果 没 有 这 样 的 父 
元 素 ， 则 元 素 按照 <body> 元 素 的 位 置 确定 显示 位 置 。 
下 面 是 一 个 使 用 嵌 套 绝对 定位 元 素 的 实例 ， 其 代码 如 下 所 示 。 


Wa example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" > 
04 ”<tite> 无 标题 文档 </title> 
05 <style> 
06 main{ 
position:absolute; 
top:50px; 
left:S0px: 
width:300px: 
height:150px: 
border:2px solid #000000;} 
07 .include{ 
position:absolute; 
left:50%; 
top:50px; 
border:2px solid #333333; 
background:red; 
width:200px: 
height:50px: 


08 </style> 
09 </head> 


10 <body> 
<div class="main"> 
<div class="include"> 这 是 嵌 套 绝对 定位 元 素 的 实例 。</div></div> 
11 </body> 
12 <html> 
在 以 上 的 代码 中 ， 定 义 两 个 绝对 定位 的 元 素 。06 行 在 父 元 素 中 使 用 绝对 定位 属性 和 边 偏 
移 属 性 ， 定 义 元 素 相 对 <body> 元 素 的 顶部 显示 位 置 和 左 侧 显 示 位 置 均 为 50px。07 行 在 子 元 素 
中 , 定义 元 素 的 左 侧 显示 位 置 为 50%, 顶部 显示 位 置 为 50px。 以 上 代码 的 显示 效果 ， 如 图 17-8 
所 示 。 
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图 17-8” 婴 套 绝对 定位 元 素 的 显示 效果 
从 图 17-8 可 以 看 出 ， 当 父 元 素 中 使 用 了 绝对 定位 属性 值 的 时 候 ， 子 元 素 的 位 置 会 按照 父 

元 素 的 位 置 显示 。 同 时 子 元 素 可 能 会 覆盖 父 元 素 。 

17.2.2 ”绝对 定位 与 相 邻 元 素 


在 使 用 绝对 定位 的 时 候 ， 绝 对 定位 元 素 会 独立 显示 ， 并 不 影响 其 他 元 素 的 显示 位 置 (但 是 
有 可 能 覆盖 其 他 元 素 )。 与 绝对 定位 元 素 相 邻 的 元 素 ,会 忽略 绝对 定位 元 素 的 存在 ,按照 各 自 的 
显示 方式 正常 显示 。 

下 面 是 一 个 绝对 定位 与 相 邻 元 素 的 实例 ， 其 代码 如 下 所 示 。 


A example.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 

05 <style> 

06 .divl{ 


07 .absolute{ 
position:absolute; 
top:50px; 
left:50px; 
width:320px:; 
height:110px; 
background:#00CC33;} 

08 div2{ 
background:blue; 


跟 我 学 HTML+CSS 


width:220px: 
height110px: 


09 </style> 

10 </head> 

11 <body> 
<div class="div1"></div> 
<div class="absolute"> 这 是 绝对 定位 的 元 素 。</div> 
<div class="div2"></div> 

12 </body> 

13 </html> 


在 以 上 的 代码 中 ，06 行 ~08 行 定义 了 3 个 元 素 。 在 第 2 个 元 素 中 ， 定 义 了 绝对 定位 属性 ， 
同时 定义 了 元 素 的 大 小 等 属性 。 在 相 邻 的 元 素 中 ， 定 义 了 元 素 的 大 小 等 属性 。 以 上 代码 的 显示 
效果 如 图 17-9 所 示 。 
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图 17-9 绝对 定位 元 素 和 相 邻 元 素 的 显示 效果 


从 图 17-9 可 以 看 出 ， 与 绝对 定位 元 素 相 邻 的 元 素 的 显示 方式 并 不 受 绝对 定位 元 素 的 影响 。 
使 用 绝对 定位 的 元 素 ， 其 显示 级 别 高 于 普通 元 素 ， 所 以 绝对 定位 元 素 覆 盖 了 普通 页 面 元 素 。 


hs 


相对 定位 ， 是 按照 元 素 自身 所 在 的 位 置 ， 使 用 边 偏 移 属性 重新 定义 元 素 的 显示 位 置 。 使 用 
相对 定位 的 元 素 , 依然 是 文档 中 的 元 素 。 元 素 的 显示 位 置 和 元 素 所 在 文档 中 其 他 元 素 相互 关联 ， 
其 具体 内 容 如 下 所 示 。 


17.3.1 相对 定位 元 素 位 置 的 确定 
在 确定 相对 定位 元 素 位 置 的 时 候 ， 首 先 要 确定 元 素 的 原 是 位 置 ， 即 元 素 在 文档 中 的 位 置 。 
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然后 根据 边 偏 移 属性 中 定义 的 偏 移 值 ， 确 定 元 素 的 最 终 位 置 。 
下 面 是 一 个 在 元 素 中 使 用 相对 定位 属性 的 实例 ， 其 代码 如 下 所 示 。 


Lb] example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 
05 <style> 
06 divl{ 
background:red; 
width:200px; 
height: 100px; 


} 

07 relative{ 
position:relative:; 
top:50px: 
left:100px:; 
width:300px; 
height: 100px:; 
background:blue;} 

08 </style> 

09 </head> 

10 <body> 
<div class="div1"></div> 
<div class="relative"> 这 是 相对 定位 的 元 素 。</div> 

11 </body> 

12 </html> 


在 以 上 的 代码 中 , 06 和 07 行 定义 两 个 元 素 。 其 中 
第 一 个 元 素 中 ， 定 义 元 素 的 背景 颜色 属性 值 为 深 灰 色 ， 
大 小 为 200pxX 100px。 在 第 2 个 元 素 中， 定义 元 素 定 
位 属性 值 为 相对 定位 ， 同 时 定义 了 元 素 的 大 小 和 背景 
等 属性 。 以 上 代码 的 显示 效果 如 图 17-10 所 示 。 

从 图 17-10 可 以 看 出 , 使 用 相对 定位 的 元 素 , 元 素 
按照 自身 所 在 的 位 置 进行 偏 移 。 


一 则 祝 EL 
17.3.2 相对 定位 与 
Eo 图 17.10 相对 定位 属性 的 显示 效果 


在 使 用 相对 定位 的 时 候 ， 相 对 定位 元 素 保留 原来 所 占有 的 空间 ， 同 时 将 自身 按照 边 偏 移 属 
性 中 定义 的 属性 值 进行 偏 移 (有 可 能 覆盖 其 他 元 素 )。 与 相对 定位 元 素 相 邻 的 元 素 ， 会 按照 相对 
定位 元 素 为 普通 元 素 的 方式 排列 。 

下 面 是 一 个 相对 定位 与 相 邻 元 素 的 实例 ， 其 代码 如 下 所 示 。 


Lb) example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
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03 ”<meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 divl{ 
background:red; 
width:200px: 
height: 100px: 


07 elative{ 
position:relative; 
top:S0px; 
left:100px: 
width:300px:; 
height: 100px; 
background:blue;} 

08 .div2{ 
background:yellow; 
width:200px: 
height:100px: 


09 </style> 

10 </head> 

11 <body> 
<div class="div1"></div> 
<div class="relative"> 这 是 相对 定位 的 元 素 。</div> 
<div class="div2"></div> 

12 </body> 

13 </html> 


在 以 上 的 代码 中 ，06 一 08 行 定义 了 3 个 元 素 。 在 第 2 个 元 素 中 ， 定 义 了 相对 定位 属性 ， 


同时 定义 了 元 素 的 大 小 等 属性 。 在 相 邻 的 元 素 中 ， 定 义 了 元 素 的 大 小 等 属性 。 以 上 代码 的 显示 
效果 如 图 17-11 所 示 。 
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图 17-11 相对 定位 元 素 和 相 邻 元 素 的 显示 效果 
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从 图 17-11 可 以 看 出 ， 与 相对 定位 元 素 相 邻 的 元 素 的 显示 方式 ， 会 保留 相对 元 素 原来 占有 
的 空间 。 使 用 相对 定义 的 元 素 ， 其 显示 级 别 高 于 普通 元 素 ， 所 以 相对 定位 元 素 覆 盖 了 普通 页 面 


元 素 。 


了 7-4 | 定位 元 素 的 重生 


在 一 个 页 面 中 , 如 果 使 用 几 个 定位 元 素 , 就 可 能 发 生 定位 元 素 重 全 的 情况 。 默认 的 情况 下 ， 
后 添加 的 元 素 会 覆盖 先 添加 的 元 素 。 通 过 使 用 层 登 定位 属性 (z-index)， 可 以 调整 各 个 层 登 元 素 
的 显示 顺序 ， 下 面 进行 详细 讲解 。 

层 倒 定位 属性 (z-index) 用 来 定义 定位 元 素 的 显示 顺序 。 在 层 登 定位 属性 中 , 属性 值 使 用 auto 
值 和 没有 单位 的 数字 ， 其 语法 结构 如 下 所 示 。 


z-index : auto | number 


| 


r 
| 


注意 


在 非 定位 元 素 中 ， 使 用 层 司 定位 属性 ， 无 法 更 改元 素 的 显示 层次 。 


下 面 是 一 个 使 用 层 登 定位 属性 的 实例 ， 其 代码 如 下 所 示 。 
Z-index.html 


07 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 
<style> 
.indexl{ 
top:50px: 
jeft:S0px: 
background:red; 
2Z-index:2; 
} 
.index2{ 
top:100px; 
left:100px: 
background:green; 
Z-index:-]1: 


Index3{ 

top:150px; 
left:150px:; 
background:yellow: 
z-index:1:; 
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09 div{ 
position:absolute; 
width:200px; 
height: 150px:; 


10 </style> 

11 <head> 

12 <body> 
<div class="index1"></div> 
<div class="index2"></div> 
<div class="index3"></div> 

13 </body> 

14 <html> 


以 上 的 代码 中 ，09 行 定义 了 3 个 大 小 均 为 200px X 150px 的 绝对 定位 元 素 。 在 第 1 个 元 素 
中 ， 定 义 上 边 偏 移 属性 和 左边 偏 移 属性 值 为 50px， 背 景 颜色 为 红色 ， 层 县 顺序 为 2。 在 第 2 个 
元 素 中 ,定义 上 边 偏 移 属 性 和 左边 偏 移 属性 值 为 100px， 背 景 颜色 为 绿色 ， 层 全 顺序 为 - 1。 在 
第 3 个 元 素 中 ， 定 义 上 边 偏 移 属性 和 左边 偏 移 属性 值 为 150px， 背 景 颜色 为 黄色 ， 层 县 顺序 为 
1。 以 上 代码 的 显示 效果 如 图 17-12 所 示 。 如 果 取 消 层 登 定位 属性 , 则 显示 效果 如 图 17-13 所 示 。 
从 图 17-12 和 图 17-13 可 以 看 出 , 通过 定义 层 登 定位 属性 ， 可 以 随意 更 改元 素 的 显示 顺序 。 
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图 17-12 ”使 用 层 驮 定位 属性 的 显示 效果 


周 坷 国 | npater 


图 17-13 取消 层 全 属性 的 显示 效果 


Te 本 章 习 题 


一 、 选 择 题 


1， 以 下 关于 元 素 的 定位 属性 (position) 的 说 法 中 ， 错 误 的 是 : ( ) 
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ER 
A. 使 用 static 元 素 按照 自身 默认 的 方式 显示 。 
B. 使 用 absolute， 元 素 将 不 会 有 任何 偏 移 。 
C. 浏览 器 不 支持 fixed 属性 。。 
D. 使 用 relative 属性 ， 元 素 以 自身 位 置 为 基准 ， 按 照 边 偏 移 属性 中 定义 的 属性 值 显示 。 
2. 以 下 有 关 边 偏 移 属性 的 定义 中 ， 正 确 的 是 : ( ) 
A. 边 偏 移 属性 中 不 可 以 使 用 百分比 值 。 
B. 边 偏 移 属性 中 使 用 百分比 值 的 时 候 ， 只 有 在 定义 元 素 定位 属性 值 为 绝对 定位 (absolute) 


或 者 相对 定位 (relative) 的 时 候 ， 才 能 正常 显示 


C. Firefox 浏览 器 不 支持 边 偏 移 属性 。 
D. 浏览 器 不 支持 左边 偏 移 属性 

以 下 有 关 使 用 绝对 定位 的 使 用 中 ， 错 误 的 是 : ( ) 
. 使 用 绝对 定位 的 时 候 ， 应 包含 定位 的 参照 元 素 。 
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B. 使 用 绝对 定位 的 元 素 ， 会 从 文档 中 独立 地 显示 出 来 ， 可 能 会 遮盖 其 他 的 页 面 元 素 。 
C. 在 使 用 绝对 定位 的 时 候 ， 不 用 参照 元 素 ， 也 会 正常 显示 。 

D. 在 使 用 绝对 定位 的 时 候 ， 绝 对 定位 元 素 会 独立 显示 ， 并 不 影响 其 他 元 素 的 显示 位 置 。 
二 、 填 空 题 

1. 定位 属性 中 ， 可 以 使 用 4 种 属性 值 ， 分 别 为 s 

2. 边 偏 移 属性 包括 s 和 a 

3. 层 释 定位 属性 (z-index)、 用 来 定义 。 属 性 值 使 用 和 

三 、 实 战 练习 


1. 制作 一 个 页 面 ， 右 边 偏 移 属 性 值 分 别 设置 为 长 度 和 百分比 值 ， 注 意 显 示 效果 。 
2. 制作 一 个 3 层 的 页 面 ， 练 习 使 用 层 骆 定位 属性 。 


一 Id 
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在 使 用 CSS 布局 页 面 的 时 候 ， 通 常 使 用 布局 属性 进行 来 构建 页 面 的 框架 和 各 个 具体 的 内 
容 部 分 。 合 理 地 使 用 布局 属性 ， 可 以 使 页 面 的 显示 更 加 灵活 。 在 CSS 中 ， 布 局 属性 包括 : 浮动 
属性 (float)、 清 除 浮动 属性 (clear)、 剪 切 属性 (clip)、 溢 出 属性 (overflow)、 显 示 方式 属性 (display) 
和 可 视 属 性 (visibility)。 


BD 


访 、 本 章 主要 内 容 有 : 


@ 理解 CSS 中 ， 各 个 布局 属性 的 特点 和 用 法 。 
@ 重点 掌握 浮动 属性 的 作用 和 用 法 。 

@ 能够 熟悉 应 用 各 个 布局 属性 。 

@ 能够 熟练 知道 每 个 布局 属性 在 代码 中 的 作用 。 


跟 我 学 HTML+CSS 


48.1 | 元 素 的 浮动 
在 网 页 中 , 使 用 浮动 属性 可 以 更 改 块 元 素 的 默认 显示 方式 , 将 原本 换行 显示 的 块 元 素 同 行 
显示 。 通 过 使 用 浮动 元 素 和 盒 模型 中 的 各 种 属性 ， 可 以 对 各 种 页 面 元 素 进行 布局 ， 下 面 进行 详 
细 讲 解 。 


18.1.1 ”元素 的 浮动 属性 float 


元 素 的 浮动 属性 (floab 用 来 定义 块 元 素 的 浮动 方式 。 在 浮动 属性 中 ， 可 以 使 用 4 种 属性 值 ， 
分 别 为 static、absolute、fixed 和 relative， 其 语法 结构 如 下 所 示 。 


float : none | left | right:; 


其 中 每 个 属性 值 的 含义 ， 如 下 所 示 。 

> none: 元 素 不 浮动 。 

> left: 元 素 浮动 在 左 侧 。 

> right: 元 素 浮动 在 右 侧 。 

下 面 是 一 个 使 用 元 素 浮动 属性 的 实例 ， 其 代码 如 下 所 示 。 


wml floathtml 
01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 使 用 浮动 属性 的 实例 </tile> 
05 <style> 
06 div{ 
float:right: 
width:300px; 
height:200px: 
background:#FFFFFF:; 
border:4px solid #000000; 


07 </style> 

08 </head> 

09 <body> 

10 ”<div> 驿 外 断 桥 边 ， 和 寂寞 开 无 主 。 已 是 黄昏 独自 悉 ， 更 著 风 和 雨 。 
无 意 苦 争 春 ， 一 任 群芳 妒 。 和 零落 成 泥 碾 作 尘 ， 只 有 香 如 故 。</div> 

11 </body> 

12 </html> 


以 上 的 代码 中 ，06 行 中 定义 了 元 素 的 浮动 属性 值 为 right， 同 时 定义 元 素 的 大 小 为 300px 
义 200px， 背 景 颜 色 为 淡 黄 色 ， 边 框 为 4 像素 黑色 实 线 边 框 。 此 时 元 素 将 显示 在 浏览 器 的 右 侧 ， 
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其 显示 效果 如 图 18-1 所 示 。 


人 本 下 页 开 下 一 记 是 黄 攻 对 下 
臣 ， 更 着 风 和 南 。 无 意 苦 争 春 ，… 任 群芳 
守 营 成 所 红 作 公 只 有 者 如 坟 。 


图 18-1 浮动 属性 的 显示 效果 


18.1.2 ”浮动 元 素 和 国定 元 素 


在 制作 页 面 的 时 候 ， 如 果 相 邻 的 两 个 元 素 中 一 个 为 浮动 元 素 ， 另 一 个 为 固定 元 素 。 则 最 终 
的 显示 效果 ， 和 元 素 之 间 的 位 置 有 关 。 如 果 浮 动 元 素 处 于 固定 元 素 之 前 ， 则 固定 元 素 和 浮动 元 
素 同 行 显示 (是 否 同行 显示 还 和 父 元 素 的 宽度 有 关 ， 这 里 假定 父 元 素 足够 宽 )。 如 果 浮 动 元 素 处 
于 固定 元 素 之 后 ， 则 浮动 元 素 换行 显示 。 

下 面 是 一 个 使 用 浮动 元 素 和 固定 元 素 的 实例 ， 其 代码 如 下 所 示 。 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
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09 </style> 
10 </head> 
11 <body> 
<div class="float"> 这 里 使 用 了 浮动 元 素 </div> 
<div class="nofloat"> 这 里 使 用 了 固定 元 素 </div> 
<div class="float float2"> 这 里 使 用 了 浮动 元 素 </div> 
12 </body> 
13 <htm> 


以 上 的 代码 中 ，06 一 08 行 中 分 别 定义 了 3 个 元 素 。 其 中 ， 第 1 个 和 第 3 个 为 浮动 元 素 ， 


第 2 个 为 固定 元 素 。 在 每 个 元 素 中 ， 都 定义 了 相应 的 大 小 和 背景 属性 。 此 时 ， 第 1 和 第 2 个 元 
素 将 同行 显示 ， 第 3 个 元 素 将 换行 显示 。 以 上 代码 的 显示 效果 如 图 18-2 所 示 。 


加 无 标题 文档 - Wiecroso 和 Et t Explorer =|Ox| 


| 文件 如 坊 加 中 查看 WW) 收 训 W I 上 WD 和 二 | 是 
(€ .my > NE 六 搜索 了 7 收 藉 《2 Si 


现 址 | 欠 ] 0: wy Docwments\19\ntitled-2. htnl 可 加 希捷 ” 


NIE 


Ed 


By Conputer 


图 18-2 ”浮动 元 素 和 固定 元 素 的 显示 效果 


18.1.3 ”两 个 浮动 元 素 的 显示 效果 

在 制作 页 面 的 时 候 ， 相 邻 的 两 个 浮动 元 素 ， 子 父 元 素 足够 大 的 情况 下 ,会 同行 显示 。 如 果 
两 个 元 素 中 定义 的 浮动 属性 值 不 同 ， 则 两 个 元 素 分 别 显示 在 父 元 素 的 两 侧 ， 中 间 空 白 区 域 显示 
父 元 素 的 背景 颜色 或 图 像 。 

下 面 是 一 个 使 用 两 个 浮动 元 素 的 实例 ， 其 代码 如 下 所 示 。 


Wk example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 .float{ 
float:left: 
width:200px; 
height:100px: 
background:red:; 
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} 

.oat2{ 
float:right; 
width:200px; 
height: 100px: 
background:blue; 


</style> 

</head> 

<body> 

<div class="float"> 这 里 使 用 了 浮动 元 素 </div> 
<div class="float2"> 这 里 也 使 用 了 浮动 元 素 </div> 
</body> 

</html> 


以 上 的 代码 中 ，06 行 和 07 行 中 定义 了 两 个 浮动 元 素 。 其 中 ， 第 1 个 浮动 元 素 中 定义 浮动 
属性 值 为 左 侧 ,第 2 个 浮动 元 素 中 定义 浮动 属性 值 为 右 侧 .以 上 代码 的 显示 效果 如 图 18-3 所 示 。 


四 无 标题 文档 - mier 1ere -条 2 
| 文件 四 ”编辑 四 ”查看 W) 收藏 人 ) 工具 CD 帮助 人 0 遍 
@a -© NIN | a- 

| 地 址 加 ) 又] pty Docmen ts\19\Untitled-3. htnl EISESI 


上 1 


Ea 三 三 三 Crter 


图 18-3 ”两 个 浮动 元 素 的 显示 效果 


osoft Internet Explorer 


18.1.4 ”多 个 浮动 元 素 的 显示 顺序 


在 制作 页 面 的 时 候 ， 如 果 同 时 使 用 多 个 浮动 元 素 ， 页 面 会 按照 浮动 元 素 定义 的 先后 对 元 素 
进行 排列 。 后 定义 的 元 素 默认 地 排列 在 先 定义 元 素 的 旁边 。 
下 面 是 一 个 使 用 多 个 浮动 元 素 的 实例 ， 其 代码 如 下 所 示 。 


Wake example.html 


01 
02 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<tile> 无 标题 文档 </title> 

<style> 

floatl 


401 


background:#333333; 


08 .float3 
float:left: 
background:#666666:; 


; 
09 float4 
人‘ 


width:150px:; 
height:75px: 
11 </style> 
12 </head> 


<body> 

<div class="floatl"> 注 意 页 面 的 显示 效果 </div> 
<div class="float2"></div> 

<div class="float3"> 注 意 页 面 的 显示 效果 </div> 
<div class="float4"></div> 


13 </body></html> 
以 上 的 代码 中 ，06 行 ~09 行 定义 了 4 个 浮动 元 素 。 其 中 ， 第 1 个 和 第 3 个 浮动 元 素 中 ， 


定义 浮动 属性 值 为 左 侧 ， 第 2 个 和 第 4 个 浮动 元 素 中 ， 定 义 浮动 属性 值 为 右 侧 。 同 时 定义 4 个 
元 素 的 背景 颜色 为 不 同 的 灰色 ， 以 上 代码 的 显示 效果 如 图 18-4 所 示 。 


图 18-4 ”多 个 浮动 元 素 的 显示 效果 
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从 图 18-4 可 以 看 出 ， 第 1 个 浮动 元 素 ， 由 于 最 优先 定义 ， 所 以 会 显示 在 最 左 侧 。 第 2 个 
浮动 元 素 ， 由 于 浮动 的 位 置 不 同 ， 所 以 显示 到 最 右 侧 。 第 3 个 浮动 元 素 ， 由 于 第 1 个 元 素 的 存 
在 ， 所 以 无 法 浮动 到 最 左 侧 ， 会 显示 在 第 1 个 浮动 元 素 的 右面 。 第 4 个 浮动 元 素 的 情形 和 第 3 
个 浮动 元 素 类 似 ， 所 以 会 显示 在 第 2 个 浮动 元 素 的 左 侧 。 


P06 浮动 的 清除 


在 网 页 中 使 用 浮动 元 素 的 时 候 ， 会 影响 后 面相 邻 的 固定 元 素 。 由 于 在 不 同 的 浏览 器 中 ， 对 
浮动 属性 的 解释 存在 差异 ， 所 以 需要 对 某 些 浮动 的 属性 进行 清除 。 清 除 浮动 元 素 时 ， 使 用 的 属 
性 是 清除 浮动 属性 (clear)， 下 面 进 行 详细 讲解 。 


18.2.1 ”清除 浮动 属性 clear 


清除 浮动 属性 (clear) 用 来 清除 与 元 素 相 邻 的 浮动 元 素 。 在 清除 浮动 属性 clear 中 ， 可 以 使 用 
4 种 属性 值 ， 分 别 为 none、left、right、both， 其 语法 结构 如 下 所 示 。 


clear : none | left | right | both; 


其 中 每 个 属性 值 的 含义 ， 如 下 所 示 。 

> none: 不 清除 浮动 。 

> left: 清除 元 素 左 侧 的 浮动 元 素 。 

> right: 清除 元 素 右 侧 的 浮动 元 素 。 

> both: 清除 元 素 两 侧 的 浮动 元 素 。 

下 面 是 一 个 使 用 清除 浮动 属性 的 实例 ， 其 代码 如 下 所 示 。 


Wks clear.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 float 


float:left: 

width:300px: 

height: 100px: 

background:red; 
07 .clear 


clear:left: 
float:left: 


403 


跟 我 学 HTML+CSS 


width:200px: 
height:100px; 
background:blue; 


08 </style> 
09 </head> 
10 <body> 
<div class="float"> 这 里 使 用 了 浮动 元 素 </div> 
<div class="clear"> 这 里 清除 了 浮动 属性 </div> 
11 </body> 
12 <html> 


以 上 的 代码 中 ，06 行 和 07 行 定义 了 两 个 浮动 元 
素 。 在 第 1 个 浮动 元 素 中 ， 定 义 元 素 的 浮动 属性 值 为 RE 
左 浮动 ， 并 定义 了 元 素 的 大 小 和 背景 属性 ， 便 于 元 素 。 关中 和 @sw memotsovouaots wor 本本 | 
的 显示 。 在 第 2 个 浮动 元 素 中 ， 定 义 元 素 的 浮动 属性 有 
值 为 左 浮动 ， 清 除 浮动 属性 值 为 清除 左 侧 浮动 ， 同 时 
定义 了 元 素 的 大 小 和 背景 属性 。 此 时 由 于 清除 了 左 侧 
浮动 元 素 ， 所 以 两 个 元 素 将 换行 显示 ， 其 显示 效果 如 
18-5 所 示 。 


BE TT mt 


18-5 ”清除 浮动 属性 的 显示 效果 


18.2.2 ”清除 浮动 与 固定 元 素 


当 清 除 浮动 元 素 右 侧 的 浮动 元 素 的 时 候 ， 由 于 固 
定 元 素 在 浮动 元 素 的 后 面 时 ， 会 同行 显示 ， 所 以 无 法 显示 清除 浮动 的 效果 。 在 实际 使 用 清除 浮 
动 属性 的 时 候 ， 常 常会 忽略 这 一 点 ， 造 成 布局 上 的 困扰 。 

下 面 是 一 个 清除 右 侧 浮动 元 素 的 实例 ， 其 代码 如 下 所 示 。 


aka example.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 


05 <style> 

06 float 
float:left: 
width:200px: 
height: 100px: 
background:red; 

} 

07 .clear 

{ 
clear-right:; 
float:left: 
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width:200px: 


height: 100px: 
background:blue; 


08 </style> 
09 </head> 
10 <body> 
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<div class="clear">how are you</div> 
<div class="float">how are you</div> 


11 </body> 
12 <html> 


以 上 的 代码 中 ， 定 义 了 两 个 浮动 元 素 。 在 第 1 个 浮动 元 素 中 ， 定 义 元 素 的 浮动 属性 值 为 左 
浮动 ， 清 除 浮动 属性 值 为 清除 右 侧 浮动 。 在 第 2 个 浮动 元 素 中 ， 定 义 元 素 的 浮动 属性 值 为 左 浮 
动 。 同时 在 两 个 元 素 中 都 定义 了 元 素 的 大 小 和 背景 属性 。 此 时 由 于 右 侧 元 素 即 使 没有 浮动 属性 ， 
依然 可 以 显示 在 第 1 个 元 素 的 右 侧 , 所 以 无 法 显示 清除 浮动 的 效果 ,其 显示 效果 如 图 18-6 所 示 。 


加 无 标题 文档 - Wicrosoft Internet Explerer =Io|x| 
文件 四 编辑) 查看 W) 收藏 内 工具) 帮助 人 ~“ 
OO AW Pm wm @| DO:" 


续 引 @) [E] 0 wy Docanents\ia\nti tled-7. hel 避 目 | 好 ” 
| 


有 | 漳 | 屋 | 
图 18-6 “清除 右 侧 浮动 元 素 的 显示 效果 
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| 内 容 的 剪 切 


在 CSS 中 ， 可 以 使 用 剪 切 属性 ， 对 元 素 内 容 的 可 视 化 区 域 进行 控制 。 剪 切 区 域 所 使 用 的 


属性 是 clip 属性 ，3# 


18.3.1 内 容 的 剪 切 属性 clip 


内 容 的 前 切 属性 (clip) 用 来 裁减 元 素 的 可 视 化 范围 。 在 内 容 的 剪 切 属性 ， 可 以 使 月 


值 ， 一 种 为 auto 值 ， 另 一 种 为 区 域 值 ， 其 语法 结构 如 下 所 示 。 


其 中 元 素 属性 值 的 写法 和 其 他 的 属性 略 有 不 同 ， 下 面 进行 详细 讲解 。 


两 种 属性 
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跟 我 学 HTML+CSS 


clip : auto | rect ( number number number number ): 


其 中 rect 中 定义 的 4 个 属性 值 ， 是 以 元 素 左上 角 为 中 心 ， 按 照 上 、 右 、 下 、 左 的 顺序 定义 
剪 切 区 域 的 四 条 边线 ， 在 四 条 边线 划 定 的 区 域 ， 将 显示 元 素 内 容 。 


JE 


| 访 注 意 


| 位 ， 


内 容 的 剪 切 属 性 (clip) 只 能 使 用 在 绝对 定位 的 元 素 中 ， 如 果 未 定义 元 素 为 绝对 定 
则 无 法 显示 剪 切 效 果 。 


下 面 是 一 个 使 用 内 容 的 剪 切 属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 18-7| clip.html 


11 
12 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

.clip 


position:absolute; 

top:50px; 

left:50px: 

clip:rect(20px 140px 40px 80px) 
width:200px; 

height: 100px: 

background:red; 


nain 


width:300px; 
height:300px: 
background:#ccccee 


</style> 

</head> 

<body> 

<div class="main"> 

<div class="clip'"> 注 意 出 现 剪 切 的 位 置 </div></div> 
</body> 

</html> 


以 上 的 代码 中 ， 定义 了 两 个 嵌 套 的 元 素 。 在 子 元 素 中 定义 了 元 素 的 剪 切 属性 ， 同 时 定义 了 
元 素 的 大 小 和 背景 属性 ， 并 定义 元 素 为 绝对 定位 。 在 父 元 素 中 ， 定 义 了 元 素 的 背景 和 大 小 等 属 
性 。 此 时 ， 在 子 元 素 中 ， 只 有 被 定义 剪 切 的 区 域内 的 部 分 才能 够 显示 ， 其 他 部 分 以 透明 的 方式 
显示 ， 其 显示 效果 如 图 18-7 所 示 。 
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D:\My Docunents\19\Untitled-7. htal 


18-7 ”定义 剪 切 属性 后 的 显示 效果 


18.3.2 ” 剪 切 属性 与 内 容 


在 使 用 剪 切 属性 的 时 候 ， 元素 内 容 的 显示 方式 并 不 发 生 改 变 。 元 素 中 的 内 容 ， 在 剪 切 区 域 
之 外 的 部 分 将 会 消失 ， 但 是 元 素 占有 的 空间 并 不 发 生 改 变 。 
下 面 是 一 个 前 切 元 素 中 内 容 的 实例 ， 其 代码 如 下 所 示 。 


example.html 


= 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

-clip 


position:absolute; 

top:20px; 

left:20px; 

clip:rect(Spx 140px 80px 20px): 
width:300px; 

height:300px; 

background:red; 


main 


跟 我 学 HTML+CSS 


background:#000000; 


08 </style> 
09 </head> 
10 <body> 
<div class="main"> 
<div class="clip"> 这 里 是 剪 切 元 素 中 的 内 容 ， 注 意 内 容 被 裁剪 的 情况 。</div></div> 
11 </body> 
12 <htm> 


以 上 的 代码 中 ， 定 义 了 两 个 嵌 套 的 元 素 。 在 子 元 素 中 定义 了 元 素 的 前 切 属性 ， 同 时 定义 了 
元 素 的 大 小 和 背景 属性 ， 并 定义 元 素 为 绝对 定位 。 在 父 元 素 中 ， 定 义 了 元 素 的 背景 和 大 小 等 属 
性 。 在 子 元 素 中 存在 部 分 文本 内 容 ， 当 使 用 前 切 属性 后 ， 部 分 文本 内 容 和 背景 将 会 消失 。 但 是 
原 有 文本 内 容 的 所 在 位 置 不 发 生变 化 .以 上 代码 的 显示 效果 如 图 18-8 所 示 。 如 果 取 消 前 切 属 性 ， 
则 页 面 的 显示 效果 如 图 18-9 所 示 。 
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图 18-8 ”使 用 剪 切 属性 后 的 显示 效果 图 18-9 取消 剪 切 属性 后 的 显示 效果 


| 溢出 内 容 的 控制 


在 一 个 元 素 中 ， 有 时 候 会 发 生 内 容 超出 元 素 定义 大 小 的 情况 。 在 CSS 中 ， 可 以 使 用 溢出 
属性 (overflow) 对 溢出 的 内 容 ， 定 义 几 种 显示 方式 ， 如 隐藏 或 者 显示 滚 条 等 。 使 用 溢出 属性 可 以 
方便 地 控制 溢出 内 容 的 显示 ， 并 能 够 保证 元 素 的 大 小 不 被 破坏 ， 下 面 进行 详细 讲解 。 
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ROSS 一 
18.4.1 溢出 属性 overflow 


溢出 属性 (overflow) 用 来 定义 元 素 溢出 部 分 的 显示 方式 。 在 溢出 属性 中 ， 可 以 使 用 4 个 属 
性 值 ， 分 别 为 visible、auto、hidden 和 scroll， 其 语法 结构 如 下 所 示 。 


‘overflow : visible | auto | hidden | scroll: 


其 中 每 个 属性 值 的 含义 如 下 所 示 。 

> visible: 默认 属性 ， 溢 出 内 容 按照 原 有 的 方式 显示 。 

> auto: 当 内 容 超出 元 素 定义 的 大 小 的 时 候 ， 显 示 滚 条 ， 否 则 正常 显示 内 容 。 
> hidden: 隐藏 溢出 的 内 容 。 

> scroll: 总 是 显示 滚 条 。 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 


03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 div 

overflow:auto: 

height:100px: 

background:#999999; 
07 </style> 
08 </head> 
09 <body> 

<div> 醉 里 挑灯 看 剑 ， 梦 回 吹 角 连 营 。</div> 
10 </body></html> 

以 上 的 代码 中 ， 在 <div> 元 素 中 定义 溢出 属性 值 为 auto， 同 时 定义 元 素 的 大 小 为 200px X 
100px。 当 元 素 中 内 容 很 少 的 时 候 ,元 素 的 显示 效果 如 图 18-10 所 示 。 当 元 素 中 内 容 超 出 元 素 大 
小 的 时 候 ， 元 素 的 显示 效果 如 图 18-11 所 示 。 


2 | | 
图 18-10 内 容 小 于 元 素 大 小 的 显示 效果 


图 18-11 内 容 大 于 元 素 大 小 的 显示 效果 


18.4.2 ”横向 溢出 属性 overflow-x 


横向 溢出 属性 (overflow-x) 用 来 定义 元 素 溢出 部 分 在 水 平方 向 上 的 显示 方式 。 在 横向 溢出 属 
性 中 ， 使 用 的 属性 值 和 溢出 属性 (overflow) 的 属性 值 完全 相同 ， 其 语法 结构 如 下 所 示 。 


Overflow-x: visible | auto | hidden | scroll: 


| 见 注意 
-~ 

下 当 在 元 素 中 使 用 了 单 向 溢出 属性 时 ， 元 素 中 定义 的 剪 切 属性 将 会 失效 ， 同 时 另 一 
个 方向 上 ， 溢 出 属性 将 使 用 默认 值 ， 


下 面 是 一 个 使 用 横向 溢出 属性 的 实例 ， 其 代码 如 下 所 示 。 


01 ”<html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 

03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tile> 无 标题 文档 </title> 

05 <style> 

06 div 


= 
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</head> 
<body> 
<div><img sre="pic .jpg" alt="pic"/></div> 
</body> 
</html> 


以 上 的 代码 中 , 在 <div> 元 素 中 定义 横向 溢出 属性 值 为 aato， 同 时 定义 元 素 的 大 小 为 300px 
X100px。 在 元 素 中 定义 了 一 个 很 大 的 图 片 ， 此 时 元 素 的 横向 上 将 会 显示 滚 条 。 其 代码 运行 后 
的 显示 效果 如 图 18-12 所 示 。 


rnet Erplorer 
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图 18-12 单 向 溢出 属性 的 显示 效果 


18.4.3 ”纵向 溢出 属性 overflow-y 


纵向 溢出 属性 (overflow-y) 用 来 定义 元 素 溢出 部 分 在 垂直 方向 上 的 显示 方式 。 在 纵向 溢出 属 
性 中 ， 使 用 的 属性 值 和 溢出 属性 (overflow) 的 属性 值 完全 相同 ， 其 语法 结构 如 下 所 示 。 


overflow-y: visible | auto | hidden | scroll: 
下 面 是 一 个 使 用 纵向 溢出 属性 的 实例 ， 其 代码 如 下 所 示 。 
overflow-y.html 


01 
02 
03 
04 
05 
06 
{ 


<html xmins="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div 
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height210px: 
background:#999999; 
} 
07 </style> 
08 </head> 
09 <body> 
10 <div><img sre="pic.jpg" alt="pic"/></div> 
11 </body> 
12 <htm> 


以 上 的 代码 中 , 在 <div> 元 素 中 定义 纵向 溢出 属性 值 为 auto， 同 时 定义 元 素 的 大 小 为 320px 


X210px。 在 元 素 中 定义 了 一 个 很 大 的 图 片 ， 此 时 元 素 的 纵向 上 将 会 显示 滚 条 。 其 代码 运行 后 
的 显示 效果 如 图 18-13 所 示 。 


18-13 ”纵向 溢出 属性 的 显示 效果 


18.4.4” 滚 条 和 边框 


在 使 用 溢出 属性 的 时 候 ， 如 果 定 义 元 素 显示 滚 条 ， 同 时 定义 了 边框 ， 要 注意 滚 条 和 边框 之 
间 的 关系 。 滚 条 的 部 分 会 显示 在 边框 的 内 部 ， 如 果 在 滚 条 处 不 想 显 示 边 框 ， 则 可 以 通过 定义 单 
侧 边框 属性 ， 取 消 滚 条 一 侧 的 边框 。 

下 面 是 一 个 显示 边框 和 滚 条 关系 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 18-12| example.html 
01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 
05 <style> 
06 div 
Gr 
overflow:auto; 
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CSS 控制 元 素 的 布局 


border:9px solid #000000; 
width:220px: 
height:100px: 
background:yellow; 
} 
08 </style> 
09 </head> 
10 <body> 
11 <div> 这 是 关于 溢出 属性 的 实例 ， 在 本 实例 中 使 用 了 auto 值 ， 当 内 容 部 分 超出 元 素 大 小 的 时 候 ， 将 会 
在 元 素 的 右边 显示 滚 条 。 注 意 观察 滚 条 和 边框 之 间 的 关系 。</div> 
12 </body> 
13 <html> 


以 上 的 代码 中 ,在 元 素 中 定义 了 溢出 属性 值 为 aato， 同 时 定义 边框 样式 为 9 像素 宽 实 线 边 
框 。 此 时 ， 滚 条 部 分 内 容 ， 将 显示 在 边框 的 内 部 ， 其 显示 效果 如 图 18-14 所 示 。 
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18-14” 滚 条 与 边框 关系 的 显示 效果 
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98.5 | 元 素 的 显示 方式 


在 CSS 中 ， 可 以 通过 相应 的 属性 控制 元 素 的 显示 方式 。 例 如 ， 可 以 将 原本 以 内 联 方式 显 
示 的 元 素 ， 以 块 元 素 的 方式 显示 。 更 改元 素 显示 方式 使 用 的 是 显示 方式 属性 display。 通 过 使 用 
显示 方式 属性 ， 可 以 方便 地 更 改元 素 默认 的 显示 方式 ， 制 作出 特殊 的 显示 效果 ， 如 导航 的 图 片 
转换 效果 等 。 下 面 进行 详细 讲解 。 


18.5.1 显示 方式 属性 display 


显示 方式 属性 (display) 用 来 更 改元 素 默 认 的 显示 方式 。 在 显示 方式 属性 中 ， 可 以 使 用 的 属 
性 值 有 很 多 ， 其 中 部 分 属性 值 还 不 被 浏览 器 所 支持 。 其 语法 结构 如 下 所 示 。 


display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | 
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跟 我 学 HTML+CSS 


table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group: 


其 中 部 分 属性 值 的 含义 如 下 所 示 。 


中 
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> 


> 
> 
> 


> 


block: 定义 元 素 按照 块 元 素 的 方式 显示 。 

none: 定义 元 素 隐藏 。 

inline: 定义 元 素 按照 内 联 元 素 的 方式 显示 。 

inline-table: 定义 元 素 显 示 内 联 的 方式 ， 与 相 邻 的 内 联 元 素 同 行 显示 。 同 时 内 容 部 分 显 
示 块 元 素 的 属性 。 

list-item: 定义 元 素 以 列表 元 素 的 方式 显示 。 

table-column-group: 定义 元 素 以 表格 标题 组 的 方式 显示 ， 即 在 表格 跨 页 的 时 候 ， 在 每 页 
中 都 以 表 头 的 方式 显示 。 

table-footer-group: 定义 元 素 以 表格 标题 组 的 方式 显示 ， 即 在 表格 跨 页 的 时 候 ， 在 每 页 
中 都 以 表 头 的 方式 显示 。 


除了 以 上 列举 出 来 的 各 种 属性 值 ， 其 余 的 各 个 属性 值 ， 正 浏览 器 还 不 支持 (在 其 他 浏览 器 
有 部 分 属性 被 支持 )。 
下 面 是 一 个 显示 方式 属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 18-13| display.html 


01 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

span 


display:block: 
width:200px: 
height:100px: 
background:#999999: 


div 

display:inline; 
width:300px: 
height: 100px: 
background:red; 

Pp 

display:list-itenn: 
width:300px: 
height: 100px: 
background:yellow:; 


img 


display-none; 


10 </style> 
11 </head> 


<body> 
<span> 内 联 元 素 </span> 
<div> 块 元 素 </div> 
<p> 内 联 块 元 素 </p> 
<img src="picjpg" alt="pic" /> 

13 </body> 

14 </html> 

在 以 上 的 代码 中 ,定义 了 4 个 不 同 显示 方式 的 元 素 ， 并 分 别 定义 了 不 同 的 属性 值 。<span> 
元 素 默认 是 内 联 元 素 ， 现 定义 为 块 元 素 。<div> 元 素 默 认 是 块 元 素 ， 现 定义 为 内 联 元 素 。<p> 元 
素 默认 是 块 元 素 ， 现 定义 为 列表 元 素 。<img> 元 素 默认 为 内 联 元 素 ， 现 定义 为 不 显示 元 素 。 代 
码 运行 后 ， 其 显示 效果 如 图 18-15 所 示 。 
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18-15 ”显示 方式 属性 的 显示 效果 


从 图 18-15 可 以 看 出 ， 使 用 显示 方式 属性 ， 可 以 方便 地 更 改元 素 固有 的 显示 方式 。 
table-column-group 属性 值 和 table-footer-group 属性 值 ， 需 要 跨 页 显示 ， 所 以 未 在 实例 中 使 用 。 


18.5.2 ”内 联 块 属性 值 的 异常 显示 


在 使 用 内 联 块 属性 值 (inline-block) 的 时 候 ， 正 浏览 器 对 该 属性 值 支持 得 并 不 完整 。 当 在 内 
联 元素 中 使 用 时 ， 元 素 可 以 显示 块 属性 ， 同 时 保留 原 有 的 内 联 属性 。 当 在 块 元 素 中 使 用 时 ， 元 
素 可 以 显示 块 属性 ， 但 无 法 显示 内 联 属性 。 

下 面 是 一 个 使 用 内 联 块 属性 的 实例 ， 其 代码 如 下 所 示 。 
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跟 我 学 HTML+CSS 


LENE inine-block html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 


03 <meta http-equiv="Content-Type" content="text/html: charset=—utf-8" /> 


04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 .span 
人 
display:inline-block: 
width:200px: 
height:100px: 
background:blue; 
} 

07 span 
i 
background:red:; 
} 

08 div 
{ 
display:inline-block; 
width:300px; 
height:100px: 
background:green: 


09 </style> 

10 </head> 

11 <body> 

12 ”<span class="span"> 定 义 内 联 块 属性 的 内 联 元 素 </span> 
13 ”<span> 一 个 内 联 元 素 </span> 

14 ” <div> 定义 内 联 块 属性 的 块 元 素 </div> 

15 </body> 

16 </html> 


在 以 上 的 代码 中 ， 定 义 了 3 个 元 素 。 在 第 1 个 
<span> 元 素 中 ， 定 义 元 素 的 显示 方式 属性 值 为 内 联 
块 属性 。 在 第 2 个 <span> 元 素 中 ， 只 定义 了 元 素 的 
背景 , 目的 是 与 其 他 元 素 作为 对 照 。 在 <div> 元 素 中 ， 
同样 定义 显示 方式 属性 值 为 内 联 块 属性 。 代 码 运行 
后 ， 其 显示 效果 如 图 18-16 所 示 。 

从 图 18-16 可 以 看 出 ， 当 在 块 元 素 中 使 用 内 联 
块 属性 值 时 ， 并 不 能 改变 块 元 素 的 显示 方式 。 


18.5.3 ”隐藏 属性 值 none 
在 使 用 隐藏 属性 值 (none) 的 时 候 , 不 但 隐藏 了 元 
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图 18-16 


国友 
绝对 定位 属性 局 限 性 的 显示 效果 1 
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素 包含 的 内 容 ， 同 时 元 素 所 占有 的 物理 空间 也 一 起 消失 了 。 在 页 面 中 ， 其 他 元 素 将 忽略 隐藏 元 
素 的 存在 ， 按 照 各 自 原 有 的 方式 显示 。 
下 面 是 一 个 使 用 隐藏 属性 值 的 实例 ， 其 代码 如 下 所 示 。 


ENE none html 


01 


07 


08 


12 
13 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf8" /> 
<title> 无 标题 文档 </title> 
<style> 

span 

{ 

background:red:; 

) 

Pp 

{ 

display:none; 
width:200px; 

height: 100px: 
background:green:; 

; 

div 

i 

width:300px; 

height: 100px: 
background:#666666;: 


</style> 

</head> 

<body> 

<span> 这 是 一 个 内 联 元 素 </span> 

<p> 这 是 一 个 使 用 none 属性 值 的 隐藏 元 素 </p> 
<div> 这 是 一 块 元 素 </div> 

</body> 

</html> 


在 以 上 的 代码 中 , 定义 了 3 个 不 同属 性 的 元 素 。 在 <span> 元 素 中 , 定义 了 元 素 的 背景 颜色 。 
在 <p> 元 素 中 ， 定义 元 素 的 显示 属性 值 为 none， 同 时 定义 了 元 素 的 宽度 、 高 度 等 属性 。 在 <div> 


元 素 中 ， 


定义 了 元 素 的 宽度 、 高 度 、 背 景 等 属性 。 定 义 <span> 元 素 和 <div> 元 素 的 目的 是 用 来 


显示 <p> 元 素 中 定义 的 属性 值 。 代 码 运行 后 ， 其 显示 效果 如 图 18-17 所 示 。 
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回国 [| 
图 18-17 隐藏 属性 值 的 显示 效果 


[3 Ceoputer 


从 图 18-17 可 以 看 出 ， 由 于 使 用 了 隐藏 属性 值 ， 所 以 <span> 元 素 和 <div> 元 素 会 忽略 <p> 元 


素 的 存在 。 


了 8.6 元 素 的 可 视 性 


元 素 的 可 视 性 ， 是 指 元 素 是 否 可 见 。 在 CSS 中 ， 可 以 通过 可 视 属 性 (visibility)， 控 制 元 素 
的 可 视 性 。 使 用 可 视 属 性 ， 只 能 完全 显示 或 者 隐藏 相应 元 素 ， 无 法 显示 部 分 元 素 内容 。 下 面 进 


行 详细 讲解 。 


18.6.1 可 视 属性 visibility 


可 视 属性 (visibility) 用 来 定义 元 素 及 其 内 容 是 否 可 见 。 在 显示 方式 属性 中 , 可 以 使 用 3 个 属 


性 值 ， 分 别 为 visible、collapse 和 hidden， 其 语法 结构 如 下 所 示 。 
visibility : visible | collapse | hidden; 
其 中 部 分 属性 值 的 含义 如 下 所 示 。 
> visible: 定义 元 素 正常 显示 。 
> collapse: 隐藏 表格 的 行 或 列 (浏览 器 未 支持 )。 
> hidden: 定义 元 素 不 显示 。 
下 面 是 一 个 可 视 属性 的 实例 ， 其 代码 如 下 所 示 。 


wb kl visibility.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html: charset—utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 
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</style> 
</head> 


» 

08 
09 
10 


<body> 

<div> 这 是 隐藏 可 视 性 的 元 素 </div> 
<span> 这 是 一 个 内 联 元 素 </span> 
11 <body></htiml> 


以 上 的 代码 中 ， 在 <div> 元 素 中 定义 了 可 视 性 属性 值 为 隐藏 ， 同 时 定义 了 元 素 的 大 小 、 背 
景 等 属性 。 在 <span> 元 素 中 ， 定 义 了 元 素 的 背景 为 红色 。 此 时 ， 由 于 <div> 元 素 中 使 用 了 隐藏 
属性 值 ， 所 以 <div> 元 素 将 无 法 显示 。 页 面 的 显示 效果 如 图 18-18 所 示 。 


TE 


18-18 可 视 性 属性 的 显示 效果 
从 图 18-18 可 以 看 出 ， 使 用 可 视 性 属性 隐藏 元 素 之 后 ， 元 素 占 有 的 物理 空间 并 没有 发 生变 

化 。 页 面 中 的 其 他 元 素 ， 按 照 隐藏 元 素 依然 存在 的 方式 进行 排列 。 

18.6.2 可 视 性 属性 与 显示 方式 属性 的 关系 


在 CSS 中 ， 可 视 性 属性 用 来 控制 元 素 是 否 显示 ， 显 示 方 式 属性 用 来 定义 元 素 的 显示 方式 。 
所 以 如 果 在 显示 方式 属性 中 ， 定 义 了 元 素 显示 方式 为 隐藏 (none)， 则 无 论 使 用 任何 可 视 性 属性 
值 ， 元 素 依然 无 法 显示 。 
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下 面 是 一 个 可 视 属性 与 显示 方式 属性 的 实例 ， 其 代码 如 下 所 示 。 


例 程 18 example.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 


02 <head> 


03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 


06 div 


display:none; 
isibility:visible: 
width:350px: 
height:150px; 
background:yellow; 


background:#999999; 
和 

08 </style> 
09 </head> 

<body> 

<div> 这 是 一 个 块 元 素 </div> 
<p> 这 是 另 一 个 块 元 素 </p> 
10 </body> 

</html> 


以 上 的 代码 中 ， 在 <div> 元 素 中 定义 了 可 视 性 属性 值 为 显示 ， 同 时 定义 元 素 显 示 方式 为 不 


显示 。 在 <p> 元 素 中 ， 定 义 了 元 素 的 大 小 、 边 框 、 背 景 等 属性 ， 用 来 显示 <div> 元 素 是 否 依然 占 
有 物理 空间 。 页 面 的 显示 效果 如 图 18-19 所 示 。 


M19\ntitled-17. htal 


图 18-19 可 视 属性 与 显示 方式 属性 的 显示 效果 
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从 图 18-19 可 以 看 出 ， 由 于 在 显示 方式 属性 中 ， 定 义 了 隐藏 属性 值 ， 所 以 即使 在 可 视 性 属 
性 中 定义 属性 值 为 可 见 ， 依 然 无 法 显示 元 素 及 其 内 容 。 


P68 本 章 习 题 


一 、 选 择 题 


2 
A 
B. 
© 
D. 
3 
A. 定义 元 素 按照 块 元 素 的 方式 显示 
B. 
人 
D. 
4 
A. 


.以 下 有 关内 容 的 前 切 属性 clip 的 说 法 中 ， 错 误 的 是 : (。 )。 
. 在 内 容 的 前 切 属性 ， 可 以 使 用 两 种 属性 值 ， 一 种 为 auto 值 ， 另 一 种 为 区 域 值 
- 内 容 的 剪 切 属性 (clip)， 只 能 使 用 在 绝对 定位 的 元 素 中 


. 内 容 的 剪 切 属性 (clip) 中 rect 中 定义 的 4 个 属性 值 ， 是 以 元 素 左上 和 角 为 中 心 ， 按 照 上 、 
、 左 的 顺序 定义 剪 切 区 域 的 四 条 边线 ， 在 四 条 边线 划 定 的 区 域 将 显示 元 素 内 容 


1 
A 
B 
C. 内 容 的 剪 切 属性 (clip)， 也 能 使 用 在 相对 定位 的 元 素 中 
D. 
下 


.以 下 关于 溢出 属性 (overflow) 的 说 法 中 ， 错 误 的 是 : (  )。 

. 使 用 visible 属性， 溢出 内 容 按照 原 有 的 方式 显示 。 

. 使 用 auto 属性 当 内 容 超出 元 素 定义 的 大 小 的 时 候 ， 显 示 滚 条 ， 否 则 正常 显示 内 容 。 
. 使 用 hidden 属性 会 隐藏 所 有 的 内 容 。 

. 使 用 scroll 属性 总 是 会 显示 滚 条 。 

.display: list-item: 表 示 的 意思 是 : (  )。 


. 定义 元 素 隐藏 

. 定义 元 素 按照 内 联 元 素 的 方式 显示 

. 定义 元 素 以 列表 元 素 的 方式 显示 

.清除 浮动 属性 clear 的 属性 值 不 包括 ( 。 )。 
.left B.top C.right D.bottom 


二 、 填 空 题 
1， 元 素 的 浮动 属性 (floa0) 用 来 。 可 以 使 用 4 种 属性 值 ， 分 别 为 


种 为 


别 为 


区 域 值 


2. 内 容 的 剪 切 属性 (clip) 用 来 。 可 以 使 用 两 种 属性 值 ， 一 种 为 值 ， 另 一 


3. 溢出 属性 (overflow) 用 来 定义 。 在 溢出 属性 中 ， 可 以 使 用 4 个 属性 值 ， 分 


4. 在 CSS 中 ， 更 改元 素 显 示 方式 使 用 的 是 显示 方式 属性 是 
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一 


三 、 实 战 练习 


1. 制作 页 面 ， 同 时 使 用 4 个 浮动 元 素 . 
2. 制作 页 面 ， 练 习 使 用 溢出 属性 (overflow) 的 各 个 属性 值 。 
3. 制作 页 面 ， 练 习 使 用 可 视 性 属性 。 注 意 可 视 性 属性 与 显示 方式 属性 的 关系 。 


gu fd 


CSS 摊 制 肌 他 元 素 的 
显示 


CSS 控制 其 他 元 素 的 显示 ， 包 括 很 多 方面 的 内 容 ， 例 如 滚 条 、 光 标 、 打 印 等 。 其 中 有 部 分 
内 容 要 通过 CSS 中 的 伪 类 选择 符 实现 。 在 CSS 中 ， 关 于 其 他 元 素 的 修饰 属性 有 很 多 ， 但 大 多 
数 还 不 被 浏览 器 所 支持 。 所 以 本 章 只 讲解 其 中 被 浏览 器 所 支持 的 各 种 属性 和 伪 类 。 


NS 


大、 本章 主要 内 容 有 : 


@ 熟悉 CSS 控制 滚 条 的 显示 的 方法 。 
@ 了 解 CSS 控制 光标 的 显示 的 方法 。 
@ ”学 会 控制 元 素 的 缩放 。 

@ 精通 控制 超 链接 的 显示 效果 。 


跟 我 学 HTML+CSS 


了 9. 了 | 控制 滚 条 的 显示 


在 各 种 浏览 器 中 都 存在 滚 条 ， 目 的 是 在 浏览 器 所 在 的 空间 中 能 够 包含 更 多 的 内 容 。 可 以 通 
过 定义 CSS 样式 ， 显 示 元 素 的 滚 条 。 通 过 使 用 滚 条 的 相关 属性 ， 可 以 修饰 和 美化 页 面 中 各 个 位 
置 的 滚 条 。 具 体内 容 如 下 所 示 。 
| 记 注 意 
滚 条 的 相关 属性 是 下 浏览 器 的 特有 属性 ， 在 其 他 浏览 器 中 无 法 显示 滚 条 属性 中 
定义 的 显示 效果 。 


19.1.1 滚 条 3d 亮 边框 颜色 属性 scrollbar-3dlight-color 


一 般 页 面 中 滚 条 都 显示 在 浏览 器 的 右 侧 。 滚 条 3d 亮 边框 ， 是 指 右 侧 滚 条 中 显示 在 滑 块 和 
箭头 区 域 最 外 层 左 侧 和 项 部 的 区 域 。 滚 条 3d 亮 边框 颜色 属性 的 语法 结构 如 下 所 示 。 


scrollbar-3dlight-color : color: 


下 面 是 一 个 使 用 滚 条 3d 亮 边框 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 
| 例 程 19-1| scrollbar-3dlight-color.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html:; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 html 


scrollbar-3dlight-color:red:; 
j 
07 div 
{ 
height: 100px: 
width:300px: 
padding:100px 0 0 0; 
border:4px solid #000000; 
overflow:scroll; 
上 
08 </style> 
09 </head> 
10 <body> 
11 <div> 注 意 滚 条 边框 的 颜色 <br > 注意 滚 条 边框 的 颜色 <br 人 > 注意 滚 条 边框 的 颜色 <br 人 注意 滚 条 边框 
的 颜色 色 <br /> 注意 滚 条 边框 的 颜色 <br /></div> 
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12 </body> 

13 <htm> 

以 上 的 代码 中 ，06 行 在 <html> 元 素 中 ， 定 义 了 滚 条 3d 亮 边 框 颜色 属性 值 为 红色 。 同 时 定 
义 了 <html> 元 素 中 的 <div> 元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 并 定义 其 滚 条 显示 效果 为 始终 显 
示 。 在 <div> 元 素 中 ， 定 义 了 文本 内 容 ， 目 的 是 使 <div> 元 素 中 产生 滚 条 。 代 码 运行 后 ， 可 以 看 
到 滚 条 的 边框 为 红色 ， 页 面 的 显示 效果 如 图 19-1 所 示 。 

要 无 标题 文档 - micresoft Internet Explorer 

文件 下 编辑) 查看 WD 收 蕊 由 工具 G) 帮助 0) 
Or © WAND TS 
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注意 注 杀 边框 的 颜色 色 
注 章 流 箱 访 框 的 颜 名 


三 [人 | cepter 


图 19-1 滚 条 3d 亮 边 框 颜色 属性 的 显示 效果 


从 图 19-1 可 以 看 到 ， 当 在 <html> 元 素 中 定义 了 滚 条 颜色 属性 后 ， 其 子 元 素 中 都 将 继承 这 
个 属性 中 定义 的 显示 效果 。 
19.1.2 ” 滚 条 亮 边 框 颜色 属性 scrollbar-highlight-color 


滚 条 亮 边框 ， 是 指 右 侧 显示 的 滚 条 中 ， 与 滚 条 3d 亮 边 框 相 邻 的 区 域 。 滚 条 亮 边框 颜色 属 
性 的 语法 结构 如 下 所 示 。 


scrollbar-highlight-color : color: 


“| ”在 单独 使 用 滚 条 亮 边 框 颜色 属性 时 ， 将 对 滚 条 其 他 部 分 的 颜色 产生 影响 。 


下 面 是 一 个 使 用 滚 条 亮 边框 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


scrollbar-highlight-color.html 
01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=—utf-8" /> 
04 <tide> 无 标题 文档 title> 
05 <style> 


425 


11 “<div> 滚 条 亮 边框 颜色 属性 <br 记 滚 条 亮 边 框 颜色 属性 <br 人 > 滚 条 亮 边 框 颜色 属性 <br 人 > 滚 条 亮 边 框 颜 
色 属 性 <br 人 滚 条 亮 边框 颜色 属性 <br 记 </div> 

12 </body> 

13 </html> 

以 上 的 代码 中 ，06 行 在 <html> 元 素 中 ， 定 义 了 滚 条 亮 边 框 颜色 属性 值 为 黑色 。 同 时 07 行 
定义 了 <html> 元 素 中 的 <div> 元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 并 定义 其 滚 条 显示 效果 为 始终 
显示 。 在 <div> 元 素 中 ， 定 义 了 文本 内 容 ， 目 的 是 使 <div> 元 素 中 产生 滚 条 。 代 码 运行 后 ， 当 拖 
动 浏览 器 的 窗口 高 度 小 于 内 容 时 ， 页 面 的 显示 效果 如 图 19-2 所 示 。 


19-2，” 滚 条 亮 边框 颜色 属性 的 显示 效果 


19.1.3” 滚 条 滑 块 颜色 属性 scrollbar-face-color 


滚 条 滑 块 ， 是 指 右 侧 显示 的 滚 条 中 ， 可 以 使 用 鼠标 上 下 拖 动 的 区 域 ， 以 及 箭头 区 域 部 分 。 
滚 条 滑 块 颜色 属性 的 语法 结构 如 下 所 示 。 


scrollbar-face-color : color: 


下 面 是 一 个 使 用 滚 条 滑 块 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 
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Wk scrollbar-face-color.html 


01 <html xmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 ”<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<title> 无 标题 文档 </tide> 


beight:100px; 
padding:100px 0 0 0; 
border: 1px solid #666666; 
‘overflow:scroll; 
}: 
08 </style> 
09 </head> 


<body> 
11 <div> 滑 块 的 颜色 <br 亿 滑 块 的 颜色 <br 人 > 滑 块 的 颜色 <br /> 滑 块 的 颜色 <br 放 滑 块 的 颜色 <br /></div> 


12 </body> 
13 </html> 


以 上 的 代码 中 ，06 行 在 <html> 元 素 中 ， 定 义 了 滚 条 滑 块 颜色 属性 值 为 黑色 。 同 时 定义 了 


<html> 元 素 中 的 <div> 元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 并 定义 其 滚 条 显示 效果 为 始终 显示 。 
在 <div> 元 素 中 ， 定 义 了 文本 内 容 ， 目 的 是 使 <div> 元 素 中 产生 滚 条 。 代 码 运行 后 ， 当 拖 动 浏览 
器 的 窗口 高 度 小 于 内 容 时 ， 页 面 的 显示 效果 如 图 19-3 所 示 。 


图 19-3 滚 条 滑 块 颜色 属性 的 显示 效果 
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19.1.4 滚 条 箭头 颜色 属性 scrollbar-arrow-color 


滚 条 箭头 ， 是 指 右 侧 滚 条 中 ， 在 滚 条 的 顶部 和 底部 显示 的 三 角 箭 头 的 区 域 。 滚 条 箭头 颜色 
属性 的 语法 结构 如 下 所 示 。 


scrollbar-arrow-color : color: 


下 面 是 一 个 使 用 滚 条 箭头 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


| 例 程 19-4| scrollbar-arrow-color.html 


01 <htmlxmins="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
04 ”<tile> 无 标题 文档 </tite> 
05 <style> 
06 div 
Ut 
Ed 


10 ”<div> 注 意 滚 条 的 箭头 颜色 <br 记 注 意 滚 条 的 箭头 颜色 <br 人 注意 滚 条 的 箭头 颜色 <br 记 注 意 滚 条 的 箭 
头 颜 色 <br 六 注意 滚 条 的 箭头 颜色 <br 广 </div> 
11 </body> 
12 </html> 
以 上 的 代码 中 ，06 行 中 在 <div> 元 素 中 定义 了 滚 条 箭头 的 颜色 为 白色 。 同 时 定义 了 <div> 
元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 并 定义 其 滚 条 显示 效果 为 始终 显示 。 在 <div> 元 素 中 ， 定 义 
了 文本 内 容 ， 目 的 是 使 <div> 元 素 中 产生 滚 条 。 代 码 运行 后 ， 当 拖 动 浏览 器 的 窗口 高 度 小 于 内 
容 时 ， 页 面 的 显示 效果 如 图 19-4 所 示 。 
壮 | sr 


图 19-4 滚 条 箭头 颜色 属性 的 显示 效果 
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19.1.5“ 滚 条 阴影 颜色 属性 scrollbar-shadow-color 


滚 条 阴影 ， 是 指 右 侧 滚 条 中 ， 显 示 在 滚 条 拖 动 区 域 和 箭头 区 域 右 侧 和 底部 的 部 分 。 滚 条 阴 


影 颜 色 属 性 的 语法 结构 如 下 所 示 。 


scrollbar-shadow-color : color: 


下 面 是 一 个 使 用 滚 条 阴影 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


汪汪 本 scrollbar-shadow-colorhtml 


01 <htmlxmilns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<tite> 无 标题 文档 </title> 
05 <style> 
06 div 
{ 
scrollbar-shadow-color:blue; 
height: 100px: 
width:400px; 
padding:100px 0 0 0: 
border: 1px solid #666666; 
overflow:scroll; 
07 </style> 
08 </head> 
09 


容 部 分 <br 户 这 里 是 元 素 内 容 部 分 <br /></div> 


11 </body> 
12 <html> 


<body> 
10 ”<div> 这 里 是 元 素 内 容 部 分 <br 人 > 这 里 是 元 素 内 容 部 分 <br 亿 这 里 是 元 素 内 容 部 分 <br 人 > 这 里 是 元 素 内 


以 上 的 代码 中 ，06 行 中 在 <div> 元 素 中 ， 定 义 滚 条 阴影 的 颜色 为 黑色 。 同 时 定义 了 <div> 
元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 并 定义 其 滚 条 显示 效果 为 始终 显示 。 在 <div> 元 素 中 ， 定 义 
了 文本 内 容 ， 目 的 是 使 <div> 元 素 中 产生 滚 条 。 代 码 运行 后 ， 当 拖 动 浏览 器 的 窗口 高 度 小 于 内 


容 时 ， 页 面 的 显示 效果 如 图 19-5 所 示 。 


汪 无 本 是 六 省 Wicresoft Taternet ETEEE 


文件 如 所 名 四 查看 史 ， 收 率 内 工具 人 天 动 加 3 
EN OIRO :te 2 2 
WE ET: wy poements 2o\ nti et-S hial EESIED 
这 里 是 元 素 内 容 部 分 
这 里 是 元 素 内 容 部 分 

是 元 素 内 容 部 分 
这 里 是 元 幸 内 容 基 分 
这 甲 晤 元 志 内 容 部 分 


BE I [| [Sy cmpvter 


图 19-5 滚 条 阴影 颜色 属性 的 显示 效果 
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跟 我 学 HTML+CSS 


19.1.6 ” 滚 条 暗部 阴影 属性 scrollbar-darkshadow-color 


滚 条 暗部 阴影 ， 是 指 右 侧 滚 条 中 ， 显 示 在 与 滚 条 阴影 相 邻 的 左 侧 和 顶部 区 域 。 滚 条 暗部 阴 
影 颜色 属性 的 语法 结构 如 下 所 示 。 


scrollbar-darkshadow-color: color: 
下 面 是 一 个 使 用 滚 条 暗部 阴影 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 


waka scrollbar-darkshadow-color html 
01 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title> 无 标题 文档 </title> 
05 <style> 
06 div 
{ 

scrollbar-darkshadow-color:yellow; 

height: 100px: 

width:400px; 

padding:100px 0 0 0; 

border: 1px solid #666666; 

‘overflow:scroll; 


07 </style> 

08 </head> 

09 <body> 

10 <div>how are you <br />how are you <br />how are you <br />how are you <br />how are you <br /></div> 
11 </body> 

12 <htm> 


以 上 的 代码 中 ,06 行 中 在 <div> 元 素 定义 了 滚 条 暗部 阴影 的 颜色 为 黄色 。 同 时 定义 了 <div> 
元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 并 定义 其 滚 条 显示 效果 为 始终 显示 。 在 <div> 元 素 中 ， 定 义 


了 文本 内 容 ， 目 的 是 使 <div> 元 素 中 产生 滚 条 。 代 码 运行 后 ， 当 拖 动 浏览 器 的 窗口 高 度 小 于 内 
容 时， 页 面 的 显示 效果 如 图 19-6 所 示 。 


ETRTTETTERCTETTOERT 可 | 
Osu- © nd an Tens | 


回 -。 
WE) [ED wy neemwmtsveovnu tlete hel EE 


how are you 
how are you 
how are you 
how are you 


| Em 


司 . | | [本 conpster 


图 19-6 滚 条 暗部 阴影 颜色 属性 的 显示 效果 
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19.1.7 


CSS 控制 其 他 元 素 的 显示 


滚 条 拖 动 区 颜色 属性 scrollbar-track-color 


滚 条 拖 动 区 ， 是 指 右 侧 滚 条 中 ， 可 以 使 用 鼠标 进行 上 下 拖 动 的 区 域 的 背景 部 分 。 滚 条 拖 动 


区 颜色 属性 的 语法 结构 如 下 所 示 。 


scrollbar-track-color : color 


下 面 是 一 个 使 用 滚 条 拖 动 区 颜色 属性 的 实例 ， 其 代码 如 下 所 示 。 
scrollbar-track-color.html 


} 


07 
08 
09 
10 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div 

{ 

scrollbar-track-color:red:; 

height: 100px: 

width:300px; 

padding:100px 0 0 0; 

border:4px solid #666666; 

overflow:scroll; 


</style> 
</head> 
<body> 
<div>how are you<br />how are you<br />how are you<br />how are you<br />how are you<br />how are 


you<br />how are you<br />how are you<br /></div> 


11 
12 


</body> 
</html> 


以 上 的 代码 中 ，06 行 中 在 <div> 元 素 中 ， 定 义 了 滚 条 拖 动 区 的 颜色 属性 值 为 红色 。 同 时 定 
义 了 <div> 元 素 的 宽度 、 高 度 、 边 框 等 属性 ， 并 定义 其 滚 条 显示 效果 为 始终 显示 。 在 <div> 元 素 
中 ， 定 义 了 文本 内 容 ， 目 的 是 使 <div> 元 素 中 产生 滚 条 。 代 码 运行 后 ， 当 拖 动 浏览 器 的 窗口 高 
度 小 于 内 容 时 ， 页 面 的 显示 效果 如 图 19-7 所 示 。 


no ET | 
四 是 : 园 - 四 加 的 | 万 潜 训 M 加 | 分- 这 辕 - 


WE [E] n wy Docments 20\ nti tLed-7. hel El El 


CT [ee 


图 19-7 ” 滚 条 拖 动 区 颜色 属性 的 显示 效果 
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19.1.8 滚 条 基准 色 属 性 scrollbar-base-color 


滚 条 基准 色 ， 是 指 在 滚 条 中 定义 一 个 作为 基准 的 颜色 滚 条 所 有 部 分 按照 基准 颜色 自动 调 
整 显示 。 滚 条 基准 色 属 性 的 语法 结构 如 下 所 示 。 


scrollbar-base-color : color; 
下 面 是 一 个 使 用 滚 条 基准 色 属性 的 实例 ， 其 代码 如 下 所 示 。 


未 壮丽 scrollbar-base-color.html 


01 
02 
03 
04 
05 
06 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div 

{ 

scrollbar-base-color:blue; 

height:100px; 

width:300px: 

padding:100px 0 0 0: 

border:4px solid #666666; 

overflow:scroll; 

} 

</style> 

</head> 


<body> 
<div>how are you<br />how are you<br />how are you<br />how are you<br />how are you<br /></div> 
/body> 
</html> 


以 上 的 代码 中 ,06 行 中 在 <div> 元 素 定义 滚 条 的 基准 颜色 为 蓝 色 。 同 时 定义 了 <div> 元 素 的 
宽度 、 高 度 、 边 框 等 属性 ， 并 定义 其 滚 条 显示 效果 为 始终 显示 。 在 <div> 元 素 中 ， 定 义 了 文本 
内 容 ， 目 的 是 使 <div> 元 素 中 产生 滚 条 。 代 码 运 行 后 ， 当 拖 动 浏览 器 的 窗口 高 度 小 于 内 容 时 ， 
页 面 的 显示 效果 如 图 19-8 所 示 。 


日 


可 | 
Tr > | 
习 


图 19-8 滚 条 基准 色 属性 的 显示 效果 
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19.1.9 “定义 滚 条 的 颜色 


在 定义 滚 条 颜色 的 时 候 ， 可 以 同时 使 用 除 基 准 色 属性 之 外 的 各 种 属性 。 因 为 如 果 定义 了 基 
准 色 属 性 ， 则 基准 色 会 和 其 他 区 域 定义 的 颜色 发 生 冲突 。 
下 面 是 一 个 定义 滚 条 颜色 的 实例 ， 其 代码 如 下 所 示 。 


Wa ka example.html 


01 
02 
03 
04 
05 
06 


以 上 的 代码 中 ，06 行 中 在 <div> 元 素 中 
定义 了 滚 条 区 域 的 各 部 分 的 颜色 。 同时 定义 。 | 这 全 ee 
了 <div> 元 素 的 宽度 、 高 度 、 边 杠 等 属性 ，。 9 wee SEENEE 
并 定义 其 滚 条 显示 效果 为 始终 显示 。 在 
<div> 元 素 中 ， 定 义 了 文本 内 容 ， 目 的 是 使 
<div> 元 素 中 产生 滚 条 。 代 码 运行 后 ， 当 拖 ee ae you 
动 浏览 器 的 窗口 高 度 小 于 内 容 时 , 页 面 的 显 ee 
示 效果 如 图 19-9 所 示 。 a 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
<title> 无 标题 文档 </title> 

<style> 

div 


scrollbar-3dlight-color:red; 
scrollbar-highlight-color:#000000:; 
scrollbar-face-color:blue; 
Scrollbar-arrow-color#fffPEF 
Scrollbar-shadow-color#eccccc: 
scrollbar-darkshadow-color:#999999; 
scrollbar-track-color-#dddddd: 
height:100px: 

width:400px: 

padding:100px00 0; 

border1px solid #666666; 
overflow:scroll; 


</style> 
</head> 
<body> 
<div>how are you<br />how are you<br />how are you<br />how are you<br />how are you<br /></div> 
</body> 
</html> 


加 
周 项 TT mot 妇 


图 19-9 滚 条 颜色 的 显示 效果 
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跟 我 学 HTML+CSS 


了 9.2 | 控制 光标 的 显示 


在 CSS 中 ， 可 以 使 用 相应 的 属性 ， 定 义 光 标的 显示 效果 。 在 网 页 中 特定 的 内 容 部 分 会 显 


示 特 定 的 光标 效果 ,通过 使 用 CSS 中 的 光标 控制 属性 ， 可 以 改变 这 种 默认 的 显示 方式 , 使 显示 
效果 更 加 合理 。 光 标 控制 属性 的 语法 结构 如 下 所 示 。 


cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress 


| row-resize | text | vertical-text | wait | *-resize | url ; 


其 中 部 分 属性 值 的 含义 如 下 所 示 。 

all-scroll， 使 用 中 间 圆 点 ， 上 下 左右 四 个 箭头 的 显示 效果 。 
col-resize: 使 用 中 间 竖 线 ， 左 右 两 个 箭头 的 显示 效果 。 
crosshair: 使 用 十 字 线 的 显示 效果 。 

default: 使 用 客户 端 平台 的 默认 光标 。 通 常 是 一 个 箭头 。 
hand: 使 用 手 形 的 光标 效果 。 

move: 使 用 十 字 箭头 的 显示 效果 。 

help: 使 用 带 问号 标记 的 箭头 的 显示 效果 。 

no-drop: 使 用 带 有 禁止 标志 的 手 形 光 标 效 果 
not-allowed: 使 用 禁止 标记 的 显示 效果 。 

pointer: 使 用 手 形 的 光标 效果 。 

progress: 使 用 带 有 沙漏 标记 的 箭头 光标 效果 。 
row-resize: 使 用 中 间 横 线 ， 上 下 两 个 箭头 的 显示 效果 。 
text: 使 用 大 写字 母 I 的 显示 效果 。 

vertical-text: 使 用 大 写字 母 I 旋转 90 度 的 显示 效果 。 
wait: 使 用 沙漏 或 手表 的 显示 效果 。 

*-resize: 使 用 带 有 方向 的 箭头 效果 。 分 为 w-resize、s-resize、 n-resize、 e-resize、 ne-resize、 
SW-Iesize、se-Iesize、Dw-Iesize 等 几 个 。 

> url: 使 用 用 户 自 定义 光标 。 通 常 后 绷 为 .cur 或 者 .ani。 

下 面 是 一 个 使 用 光标 控制 属性 的 实例 ， 其 代码 如 下 所 示 。 


vv 


vy 


wv YY 


VVVYVYVYVv vyvyvyv 


ak example.html 
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01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 <meta http-equiv="Content-Type" content="text/html: charset=utf-8" /> 
04 ”<title>css 属性 实例 </title> 
05 <style> 
06 pl{ 
cursor:auto; 


} 


11 .p4{ 


12 p5{ 


13 .6{ 


14 p7{ 


15 p8{ 


16 .p9{ 


17 .pl10{ 


18 pll{ 


25 <body> 


<p class="p1"> 这 里 是 光标 效果 属性 的 实例 </p> 
<p class="p2"> 这 里 是 光标 效果 属性 的 实例 <p> 
<p class="p3"> 这 里 是 光标 效果 属性 的 实例 <p> 
<p class="p4"> 这 里 是 光标 效果 属性 的 实例 < p> 
<p class="p5"> 这 里 是 光标 效果 属性 的 实例 </p> 
<p class="p6"> 这 里 是 光标 效果 属性 的 实例 <p> 
<p class="p7"> 这 里 是 光标 效果 属性 的 实例 </p> 
<p class="p8"> 这 里 是 光标 效果 属性 的 实例 </p> 
<p class="p9"> 这 里 是 光标 效果 属性 的 实例 </p> 
<p class="p10"> 这 里 是 光标 效果 属性 的 实例 <p> 
<p class="p11"> 这 里 是 光标 效果 属性 的 实例 </p> 
<p class="p12"> 这 里 是 光标 效果 属性 的 实例 </p> 
<p class="p13"> 这 里 是 光标 效果 属性 的 实例 </p> 
<p class="p14"> 这 里 是 光标 效果 属性 的 实例 </p> 


以 上 的 代码 中 ， 在 每 个 <p> 元 素 中 ， 定 义 了 不 同 的 光标 显示 属性 。 代 码 运行 后 的 显示 效果 


如 图 19-10 所 示 。 
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9.3 | 控制 元 素 的 缩放 


在 CSS 中 ， 可 以 使 用 相应 的 属性 ， 定 义 元 素 的 缩放 程度 。 当 定义 了 缩放 程度 之 后 ， 元 素 
中 的 所 有 内 容 ， 包 括 文 本 、 图 像 等 ， 都 将 按照 定义 的 属性 值 进行 缩放 。 定 义 元 素 缩放 的 属性 是 
zoom， 其 语法 结构 如 下 所 示 。 


Zoom : normal | number | percent: 


其 中 部 分 属性 值 的 含义 如 下 所 示 。 

> nomal: 定义 元 素 显 示 正 常 的 大 小 。 

> number: 使 用 数字 定义 元 素 的 缩放 比例 。 

> precent: 使 用 百分比 数 ， 定 义 元 素 的 缩放 比例 。 


| 滚 条 的 相关 属性 ， 在 正 浏 览 器 中 才能 够 正常 显示 . 


下 面 是 一 个 元 素 缩放 属性 的 实例 ， 其 代码 如 下 所 示 。 
[ 例 程 19-11| xhtml-change.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html:charset=gb2312" /> 
04 ”<title> 无 标题 文档 </title> 


background:#cceecee: 
border:5px solid #000000; 
margin:0 0 10px 0: 

07 pl 
{ 
Zoom:2; 
} 

08 img 


437 


跟 我 学 HTML+CSS 


< 
<img src="picjpg" alt="pic" 广 注 意 缩放 的 效果 </p> 
<p class="pl"> 
<img src="picjpg" alt="pic" 户 注意 缩放 的 效果 </p> 
12 </body> 
13 </html> 


以 上 的 代码 中 ，06 行 在 <p> 元 素 中 定义 了 300*100 的 方 框 ， 在 <p1> 元 素 中 ， 定 义 了 缩放 属 


性 值 为 2。 在 <img> 元 素 中 定义 图 片 的 宽度 为 200 像素 。 代 码 运行 后 的 显示 效果 ， 如 图 19-11 
所 示 。 


Big NE LE 


19-11 缩放 属性 的 显示 效果 


从 图 19-11 可 以 看 出 ， 当 定义 了 缩放 属性 后 ， 不 但 元 素 的 内 容 会 按照 比例 缩放 ， 元 素 中 定 
义 的 各 种 样式 值 也 会 按照 比例 缩放 。 


9.4 | 控制 链接 的 显示 


在 网 页 中 ， 通 常 要 使 用 很 多 链接 元 素 ， 定 义 页 面 的 跳 转 。 在 CSS 中 ， 可 以 通过 使 用 伪 类 
来 定义 链接 内 容 在 各 种 状态 下 的 显示 效果 。 通 常 链接 元 素 都 有 4 个 状态 ， 未 访问 状态 、 鼠 标 悬 
停 状态 、 链 接 激活 状态 或 已 访问 状态 ， 其 显示 效果 的 控制 分 别 由 4 个 伪 类 控制 。 下 面 进行 详细 
讲解 。 

19.4.1 定义 链接 未 访问 的 显示 效果 
定义 链接 未 访问 效果 的 伪 类 是 : :link。 使 用 :link 伪 类 可 以 定义 未 访问 链接 的 各 种 显示 效 
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CSS 控制 其 他 元 素 的 显示 


果 。:link 伪 类 的 使 用 方法 ， 如 下 所 示 。 

:link:{ 属 性 :属性 值 ;} 

下 面 是 一 个 使 用 :link 伪 类 的 实例 ， 其 代码 如 下 所 示 。 
:link:.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html:charset=gb2312" /> 
04 ”<title> 无 标题 文档 </title> 

05 <style> 

06 alink 


Color:#333333; 
font-size:24px; 
font-weight:bold; 
bs 
07 </style> 
08 </head> 
09 <body> 
<a href="#'> 链 接 的 内 容 </a> 
10 </body> 
11 <html> 


以 上 代码 中 , 06 行 中 使 用 :ink 伪 类 ,定义 了 链接 攻 
元 素 在 未 访问 时 的 各 种 效果 ， 包 括 文本 颜色 、 字 体 大 | 芭 包 sm im ww dam 和 


-昌国 罩 的 | 万 = 
小 、 字 体 样式 等 。 当 链接 内 容 未 访问 时 ， 其 显示 效果 | 中 
习 


如 图 19-12 所 示 。 链接 的 内 容 
19.4.2 ”定义 链接 鼠标 悬 停 的 显示 效果 


定义 链接 鼠标 悬 停 效 果 的 伪 类 是 : :hover。 使 

用 :hover 伪 类 可 以 定义 链接 鼠标 悬 停 的 各 种 显示 效 

果 。:hover 伪 类 的 使 用 方法 ， 如 下 所 示 。 GE CL 
人 图 19-12 定义 :ink 伪 类 后 链接 的 显示 效果 


下 面 是 一 个 使 用 :hover 伪 类 的 实例 ， 其 代码 如 下 所 示 。 
xhtml-change.html 


01 <htmlxmlns="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html:charset=gb2312" /> 
04 ”<title>css 属性 实例 </title> 

05 <style> 

06 a:hover 
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<body> 
<a href="#> 这 里 是 包含 链接 的 内 容 </a> 
</body> 
</htnl> 


以 上 代码 中 ，06 行 中 使 用 :hover 伪 类 ， 定 义 了 链接 元 素 在 鼠标 悬 停 时 的 各 种 效果 ， 包 括 文 


本 颜色 、 


字体 大 小 、 字 体 样式 等 。 当 筷 标 悬 停 在 链接 内 容 上 时 ， 其 显示 效果 如 图 19-13 所 示 。 


四 19-13 ”定义 :hover 伪 类 后 的 显示 效果 


19.4.3 ”定义 链接 激活 的 显示 效果 


定义 链接 激活 时 (例如 鼠标 按 下 与 释放 之 间 ) 显 示 效 果 的 伪 类 是 : :active。 使 用 :active 伪 类 可 
以 定义 链接 激活 的 各 种 显示 效果 。:active 伪 类 的 使 用 方法 ， 如 下 所 示 。 

:active:{ 属 性 :属性 值 ;} 

下 面 是 一 个 使 用 :active 伪 类 的 实例 ， 其 代码 如 下 所 示 。 


ba xhtml-change.html 


01 
02 
03 
04 
05 
06 


<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html:charset=gb2312" /> 
<title>css 属性 实例 </tile> 

<style> 

aactive 


font-weight:bold; 
background:#999999; 
07 </style> 
08 </head> 


<body> 
10 ”<a href="#'> 这 里 是 包含 链接 的 内 容 </a> 

11 </body> 

12 </html> 

以 上 代码 中 ，06 行 中 使 用 :active 伪 类 ， 定 义 了 链接 元 素 在 激活 时 的 各 种 效果 , 包括 文本 颜 
色 、 字 体 大 小 、 字 体 样式 等 。 当 在 链接 元 素 上 按 下 鼠标 时 ， 其 显示 效果 如 图 19-14 所 示 。 


19-14 ”定义 :active 伪 类 后 的 显示 效果 


19.4.4 ”定义 链接 访问 后 的 显示 效果 


定义 链接 访问 后 显示 效果 的 伪 类 是 : :visited。 使 用 :visited 伪 类 可 以 定义 链接 内 容 被 访问 后 
的 各 种 显示 效果 。:visited 伪 类 的 使 用 方法 ， 如 下 所 示 。 

:visited:{ 属 性 :属性 值 ;} 

下 面 是 一 个 使 用 :visited 伪 类 的 实例 ， 其 代码 如 下 所 示 。 


bk ak xhtml-change.html 
1 <html xmlns="http://www.w3.org/1999/xhtml"> 
02 <head> 
03 ”<meta http-equiv="Content-Type" content="text/html:charset=gb2312" /> 
04 ”<title>css 属性 实例 </tite> 
05 <style> 
06 a:visited 
4 
color:#666666: 
font-size:36px: 
font-weightbold: 
} 


</style> 
</head> 


<body> 
<a href="#> 这 里 是 包含 链接 的 内 容 </a> 
</body> 
</html> 


Le 


以 上 代码 中 ，06 行 中 使 用 :visited 伪 类 ， 定 义 了 链接 元 素 在 访问 后 的 各 种 效果 ， 包 括 文本 
颜色 、 字 体 大 小 、 字 体 样式 等 。 当 链接 访问 后 ， 其 显示 效果 如 图 19-15 所 示 。 


t Internet Explor 


19-15 ”定义 :visited 伪 类 后 的 显示 效果 


19.4.5 “定义 链接 效果 的 顺序 


在 使 用 CSS 属性 ， 定 义 链接 显示 效果 的 时 候 ， 要 按照 :ink、:visited、:hover、:active 的 顺 
序 定 义 。 如 果 使 用 错误 的 顺序 ， 链 接 属性 中 定义 的 部 分 效果 将 无 法 显示 。 
下 面 是 一 个 使 用 4 个 伪 类 同时 定义 链接 效果 的 实例 ， 其 代码 如 下 所 示 。 


ER xhtml-change.html 

01 -<html xmins="http://www.w3.org/1999/xhtml"> 

02 <head> 

03 <meta http-equiv="Content-Type" content="text/html:charset=gb2312" /> 
04 ”<title>ess 属性 实例 </title> 
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08 .al:hover 


color:#333333; 
font-size:48px; 

} 

12 .a2:active 

{ 
color:#000000; 
font-size:36px; 
font-weight:bold; 


14 </style> 

15 </head> 

16 <body> 

17 ”<a href="#" class="al"> 这 里 是 包含 链接 的 内 容 </a><br 记 
18 ”<a href="#' class="a2"> 这 里 是 包含 链接 的 内 容 </a> 

19 </body> 


20 </html> 

以 上 的 代码 中 ,制作 了 两 个 <a> 元 素 。 在 每 个 <a> 元 素 中 ,定义 了 相同 的 链接 显示 效果 ， 只 
是 使 用 了 不 同 的 定义 顺序 。 

当 鼠 标 悬 停 在 第 一 个 <a> 元 素 上 时 ， 其 显示 效果 如 图 19-16 所 示 。 


| 这 里 是 包含 链接 的 内 容 
这 里 是 包含 链接 的 内 容 


图 19-16 鼠标 县 停 在 第 一 个 链接 元 素 上 的 效果 


从 图 19-16 可 以 看 出 , 此 时 页 面 正确 地 显示 了 CSS 中 定义 的 属性 。 当 鼠标 悬 停 在 第 二 个 <a> 
元 素 上 时 ， 其 显示 效果 如 图 19-17 所 示 。 


| 这 里 是 包含 链接 的 内 容 


这 里 是 包 的 内 容 


19-17 ”鼠标 悬 停 在 第 二 个 链接 元 素 上 的 效果 


从 图 19-17 可 以 看 出 ， 由 于 没有 正确 地 定义 链接 伪 类 的 顺序 ， 此 时 页 面 无 法 正常 显示 鼠标 
其 停 时 的 效果 。 


了 9.5 | 三 亲本 是 


一 、 选 择 题 


1， 以 下 关于 控制 滚 条 的 显示 的 说 法 中 ， 错 误 的 是 : ( “)。 

A. 滚 条 的 相关 属性 是 正 浏览 器 的 特有 属性 。 

B. 滚 条 的 相关 属性 也 是 其 他 浏览 器 中 的 特有 属性 。 

C. 滚 条 3d 亮 边框 ， 是 指 右 侧 滚 条 中 ， 显 示 在 滑 块 和 箭头 区 域 最 外 层 左 侧 和 顶部 的 区 域 。 
D. 单独 使 用 滚 条 亮 边框 颜色 属性 时 ， 将 对 滚 条 其 他 部 分 的 颜色 产生 影响 。 

2. 以 下 有 关 滚 条 亮 边框 颜色 属性 的 说 法 中 ， 错 误 的 是 : ( )。 


是 


一 
. 单独 使 用 滚 条 亮 边框 颜色 属性 时 ， 将 对 滚 条 其 他 部 分 的 颜色 产生 影响 
. 滚 条 亮 边框 ， 是 指 右 侧 显示 的 滚 条 中 ， 与 滚 条 3d 亮 边框 相 邻 的 区 域 
. 单独 使 用 滚 条 亮 边 框 颜 色 属性 时 ， 不 会 对 滚 条 其 他 部 分 的 颜色 产生 影响 
. 使 用 滚 条 亮 边框 颜色 属性 时 ， 整 个 页 面 中 的 亮 边 框 颜 色 都 会 变化 
scrollbar-shadow-color 表示 的 意思 是 : ( )。 
. 滚 条 阴影 颜色 属性 
滚 条 亮 边 框 颜 色 属性 
. 滚 条 滑 块 颜色 属性 
4. {scrollbar-face-color:yellow:} 样 式 的 作用 是 : (  )。 
A 滚 条 亮 边框 颜色 为 黄色 ”B. 深 条 箭头 颜色 为 黄色 
C 滚 条 滑 块 颜色 为 黄色 D 滚 条 阴影 颜色 为 黄色 


ei 
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二 、 填 空 题 

1. 在 CSS 中 光标 控制 属性 是 ， 其 中 中 间 竖 线 ， 左 右 两 个 箭头 的 显示 效果 的 属性 
。 手 形 的 光标 效果 属性 是 。 

2. 定义 链接 未 访问 效果 的 伪 类 是 ， 定 义 链 接 访问 后 显示 效果 的 伪 类 是 


3. 在 CSS 中 ， 定 义 元 素 的 缩放 程度 的 属性 是 ， 它 可 以 使 用 的 属性 值 有  、 
和 


三 、 实 战 练习 
1. 制作 页 面 ， 练 习 使 用 CSS 样式 控制 滚 条 的 显示 。 


2， 制 作 页面 ， 练 习 使 用 CSS 样式 控制 光标 的 显示 。 
3. 制作 页 面 ， 练 习 使 用 CSS 样式 控制 链接 的 显示 。 


hapter 
制作 个 人 博客 页 面 


个 人 博客 页 面 用 来 展示 个 人 的 一 些 信息 、 日 志 以 及 个 人 的 图 片 等 , 是 一 个 方便 的 展示 平台 。 
个 人 博客 页 面 的 设计 和 制作 都 比较 自由 。 有 具体 的 制作 过 程 包括 以 下 几 个 步骤 : 制作 页 面 效果 图 ， 
这 个 部 分 通常 使 用 Photoshop 完成 ， 然 后 再 使 用 Photoshop 的 切片 工具 ， 将 效果 图 的 各 个 部 分 
制 成 图 片 ， 最 后 在 Dreamweaver 中 制作 成 网 页 。 


全 、 本章 主要 内 容 有 : 


@ 掌握 网 站 页 面 的 制作 流程 。 

@ ”学 会 合理 地 划分 和 规划 页 面 。 
@ 学 会 合理 地 公用 代码 。 

@ ”学 会 规划 站 点 的 样式 文件 。 

@ ”学 会 优化 代码 和 页 面 结构 。 


跟 我 学 HTML+CSS 


20.1 | 制作 页 面前 的 准备 工作 


在 制作 具体 页 面 之 前 ， 先 要 对 页 面 进行 大 体 的 规划 ， 这 个 规划 可 以 帮助 确定 页 面 的 大 体 结 
构 ， 这 个 步骤 一 般 在 头脑 中 进行 ， 可 以 不 必 显 示 在 效果 图 上 。 在 页 面 区 块 大 概 构思 完成 后 ， 使 
用 Photoshop 的 切片 工具 对 页 面 进行 切割 ， 在 切割 的 过 程 中 制作 出 页 面 的 背景 等 修饰 图 片 。 


20.1.1 规划 页 面 的 内 容 


页 面 结构 的 规划 是 制作 整个 页 面 的 基础 ， 好 的 页 面 规划 能 够 使 页 面 更 具有 扩展 性 ， 能 够 适 
应 页 面 内 容 的 变化 。 在 规划 页 面 时 ， 首 先 分 割 页 面 为 几 个 部 分 ， 如 Logo、Banner、 导 航 条 、 侧 
栏 等 内 容 。 然 后 在 各 个 部 分 中 切 出 内 容 和 背景 。 

本 实例 中 效果 图 的 大 概 划分 结构 如 图 20-1 所 示 。 

在 如 图 20-1 所 示 的 结构 图 中 ， 将 整个 页 面 纵向 分 成 了 4 个 部 分 ， 分 别 用 来 显示 主要 的 几 
个 内 容 。 这 样 划分 的 目的 是 让 页 面具 有 更 大 的 伸缩 性 。 


图 20-1 页 面 结构 图 
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20.1.2” 切 分 效果 图 


在 Photoshop 中 首先 区 分 页 面 中 的 修饰 图 片 和 内 容 图 片 。 然 后 将 页 面 中 的 文本 内 容 等 隐藏 ， 
根据 构思 的 页 面 区 块 ， 切 割 出 背景 图 片 和 内 容 图 片 。 最 后 将 各 种 图 片 内 容 保存 在 磁盘 的 某 个 文 
件 夹 中 。 

从 软件 保存 后 的 图 片 ， 都 会 默认 地 使 用 编号 的 格式 定义 图 片 的 名 称 。 在 实际 使 用 时 ， 这 些 
名 称 不 具有 实际 的 含义 ， 建 议 将 图 片 名 称 修改 为 与 内 容 相关 。 最 终 保 存 的 图 片 内 容 如 图 20-2 
所 示 。 


1 ”Bn 
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20-2 ”切割 保存 后 的 图 片 文件 


20.2 | 规划 站 点 文件 夹 


准备 好 各 种 页 面 文 件 之 后 ,需要 做 的 是 制作 好 站 点 的 各 种 文件 夹 。 通常 各 种 图 片 文件 都 放 
在 名 称 为 images 的 文件 夹 中 。 样 式 表 文 件 单独 放 在 一 个 名 称 为 style 的 文件 夹 中 。 站 点 的 首页 
一 般 命名 为 “default”， 并 保存 在 根 文件 夹 下 。 此 时 ， 站 点 的 目录 结构 如 图 20-3 所 示 。 


图 20-3 站 点 的 规划 
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跟 我 学 HTML+CSS 


20.3 | 定义 基本 的 样式 


在 站 点 建立 后 ,就 可 以 制作 CSS 样式 文件 , 并 关联 在 XHTML 文件 中 .然后 通过 在 XHTML 
中 ， 对 每 个 元 素 定义 (或 关联 ) 不 同 的 样式 ， 制 作 页 面 的 各 个 部 分 。 按 照 最 初 规划 的 页 面 结构 ， 
整个 页 面 分 为 头 部 内 容 、 导 航 内 容 、 主 体内 容 、 底 部 内 容 几 个 部 分 。 本 节 讲解 页 面 基 础 样式 的 
制作 ， 其 具体 内 容 如 下 所 示 。 


20.3.1 新 建 CSS 文件 


在 制作 具体 的 内 容 之 前 ， 首 先 要 制作 好 需要 使 用 的 CSS 样式 文件 ， 并 在 XHTML 中 调用 
该 文件 。 这 样 做 可 以 将 页 面 结构 部 分 和 表现 修饰 部 分 分 离 到 两 个 文件 中 ， 便 于 后 期 的 维护 。 在 
style 文件 夹 中 右 击 新 建 一 个 文本 文档 ， 然 后 更 改名 称 为 “style.css”。 


20.3.2 定义 页 面 的 基础 样式 


新 建 页 面 之 后 ， 页 面 的 默认 标题 为 “无 标题 文档 ”， 所 以 还 需要 将 文档 更 改 为 更 有 意义 的 
名 称 。 另外 为 了 更 好 地 显示 页 面 内 容 ,以 及 辅助 宣传 页 面 , 还 需要 修改 和 定义 页 面 的 文字 编码 、 
<meta> 标 签 等 相关 内 容 ， 其 具体 的 代码 如 下 所 示 。 


<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional//EN" 
"http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=gbk" /> 

<title> 一 梦 如 是 -博客 </title> 

<meta name-"Keywords" content=" 博 客 ,Blog,Blogger, 中 飞 .Sohu, 网 络 日 志 手心 的 太阳 "入 
<meta name="description" content=" 一 梦 如 是 无 端 天 与 婢 婷 ， 夜 月 一 帘 幽 梦 " /> 
<meta name="robots" content="index,follow" /> 

<link rel="stylesheet" type="text/css" href="style/style.css" /> 

</head> 


以 上 代码 中 ， 使 用 <meta> 元 素 定义 了 页 面 的 各 种 信息 ， 然 后 使 用 <link> 元 素 定义 了 页 面 关 
联 的 样式 文件 “style.css”。 在 关联 的 CSS 样式 文件 中 ， 定 义 了 页 面 使 用 的 基础 样式 ， 其 代码 
如 下 所 示 。 


body { 
margin: Opx; 证 定义 边界 的 综合 属性 为 0*/ 
padding: Opx; 上 定义 主体 的 补 白 属性 为 0*/ 
font-family: "宋体 ",Verdana, Arial, Helvetica, sans-serif 访 定 义 主体 部 分 的 字体 为 宋体 */ 
font-size: 12px: 刻 定 义 主题 部 分 的 字体 大 小 为 12 像素 */ 
color: #cccccce; 刻 定 义 主体 字体 的 颜色 为 浅 灰 色 */ 


line-height: 130% 庆 定 义 行 高 属性 为 正常 的 1.3 倍 */ 
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background-color: #11191E; 庆 定 义 主体 背景 的 颜色 的 黑色 */ 
> 
af 
color: 趣 5651F; 庆 定 义 字体 的 颜色 为 橘红 色 关 
text-decoration: underline; 族 定 义 文字 下 划 线 */ 
) 
ahover { 
color: #f4f4f4; 片 定义 字体 的 颜色 为 白色 */ 
text-decoration: underline; 让 定义 文字 下 划 线 */ 
} 
img { 
border: none; 上 # 图 片 无 边框 所 


) 


在 页 面 的 基础 样式 中 ， 通 过 body 选择 符 定义 了 页 面 使 用 的 字体 大 小 、 文 字 的 颜色 、 行 高 、 
背景 颜色 等 。 这 些 样式 是 页 面 整 体 效 果 以 及 通用 的 设置 。 在 a 选择 符 中 定义 了 页 面 链接 的 颜色 ， 
配合 :hover 伪 类 可 以 定义 这 个 页 面 链接 的 显示 效果 。 最 后 定义 图 片 的 边框 为 0， 目 的 是 消除 图 
片 默认 边框 带 来 的 显示 差异 。 


20.4 | 制作 页 面 头 部 


定义 了 页 面 基 础 样式 后 ， 就 可 以 开始 进行 页 面 头 部 内 容 的 制作 ， 其 具体 内 容 如 下 所 示 。 


20.4.1 制作 页 面 头 部 的 结构 


从 效果 图 可 以 看 到 ， 页 面 头 部 的 内 容 为 两 行文 本 ， 其 中 部 分 文本 包含 超级 链接 ， 为 了 更 
好 地 独立 控制 每 个 部 分 的 显示 效果 ， 在 制作 结构 时 为 各 种 内 容 定 义 了 不 同 的 id, 便于 分 别 控制 
每 个 部 分 的 显示 效果 ， 其 具体 的 代码 如 下 所 示 。 


<div id="wrapper"> 
<div id="innerWrapper"> 
<div id="header"> 
<div id="innerHeader"> 
<hl id="blogTitle"><a hre 伍 "#"> 明 天 会 更 好 </a></hl> 
<div id="blogUrl"><a href="#">http://abe.*****.com/</a> <a href="#'> 复 制 地 址 </a> </div> 
<div id-"blogDesc"> 无 端 天 与 姥 婷 ， 夜 月 一 帘 幽 梦 </div> 
</div> 
</div> 
</div> 


20.4.2 ”定义 页 面 头 部 的 样式 
根据 页 面 头 部 的 结构 ， 可 以 分 析出 头 部 的 代码 分 为 几 个 部 分 ,一 部 分 是 整体 定义 页 面 大 小 
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和 背景 的 wrapper 样式 。 其 具体 的 代码 如 下 所 示 。 


#wrapper { 
margin: Opx auto; 
width: 993px; 


background-image: url(../images/sohul0 01.jpg); 


background-position: left top; 
background-repeat: no-repeat; 
} 


以 上 代码 中 , 主要 定义 了 页 面 头 部 使 用 的 背景 图 片 , 并 定义 了 背景 图 片 的 显示 方式 和 位 置 。 


证 边界 综合 属性 设置 为 自动 */ 


证 调用 背景 图 片 */ 
所 背 景 图 片 位 置 置 于 左上 */ 
收 背 景 图 片 不 重复 */ 


接 下 来 是 页 面 头 部 内 容 的 部 分 ， 首 先是 关于 头 部 内 容 位 置 的 确定 ， 其 代码 如 下 所 示 。 


#header { 
height: 374px:; 

} 

#innerHeader { 
width: 983px; 
padding-left: 10px: 


} 


在 上 面 的 代码 中 主要 定义 了 头 部 元 素 占有 空间 的 大 小 ， 以 及 与 左 侧 边界 之 间 的 距离 。 当 这 


让 定义 头 部 的 高 度 的 为 374 像素 */ 


人 # 定 义 左 侧 补 白 10 像素 */ 


些 确定 之 后 ， 就 可 以 进一步 定义 内 容 的 显示 方式 和 位 置 了 ， 其 具体 的 代码 如 下 所 示 。 
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#blogTitle { 
float: left: 

} 

#blogTitle, #blogTitle a { 
color: #fFFFFF: 
font-size: 16px; 
line-height: 16px: 

text-decoration: none; 
margin-top: 15px; 
padding-left: 70px: 

| 

#blogTitle a:hover { 
color: #F5651F: 

} 

#blogUrl { 
color: #fFFFFE: 
padding-top: 15px; 

) 

#blogUrla { 
color: #fFFFFF: 
padding-left: 10px:; 

上 

#blogUrl ahover { 
color: #E565 1F; 

} 


让 定 义 字体 向 左 浮动 */ 


族 定义 字体 颜色 为 白色 */ 

上 # 定 义 字体 大 小 为 16 像素 */ 

片 定义 行 高 为 16 像素 */ 

上 # 定 义 字体 无 修饰 9 

人 # 定 义 顶 部 边界 宽度 为 15 像素 */ 
上 # 定 义 左 侧 补 白 为 70 像素 */ 


上 # 定 义 字体 颜色 为 橘红 色 装 


族 定 义 字体 颜色 为 白色 */ 
族 定义 顶部 补 白 为 15 像素 */ 


让 定义 字体 颜色 为 白色 */ 
族 定 义 四 边 补 白 为 70 像素 */ 


庆 定 义 字体 颜色 为 橘红 色 沁 
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#oblogDesc { 
color: #fffffF 刻 定 义 字体 颜色 为 白色 */ 
width: 400px; /# 定 义 文本 的 宽度 为 400 像素 */ 
word-break: break-all: 必定 义 文本 中 可 以 在 单词 中 换行 显示 */ 
padding-top: 15px; 证 定义 顶部 补 白 150 像素 */ 
padding-left 140px:; 人 # 定 义 左 侧 补 白 140 像素 */ 


} 


在 上 面 定义 的 CSS 样式 中 ， 主 要 定义 了 头 部 标题 显示 的 位 置 ， 以 及 超 链 接 的 内 容 在 鼠标 
悬 停 与 未 单 击 之 前 的 显示 效果 。 其 中 元 素 位 置 的 确定 是 通过 使 用 浮动 属性 、 边 界 属性 和 补 白 属 
性 一 起 完成 的 。 代 码 运行 后 页 面 的 显示 效果 如 图 20-4 所 示 。 
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图 20-4 页 面 头 部 的 显示 效果 


刀 0.5， 制作 页 面 导航 


页 面 导航 内 容 包 括 制作 导航 的 结构 、 导 航 的 背景 、 链 接 样式 等 。 在 导航 的 样式 中 ， 首 先 要 
对 各 个 元 素 进行 精确 定位 。 然 后 使 用 各 种 伪 类 和 类 选择 符 ， 制 作出 每 个 导航 链接 的 独立 背景 ， 
以 及 显示 、 隐 藏 效果 。 其 具体 内 容 如 下 所 示 。 


20.5.1 制作 页 面 导 航 的 结构 


页 面 导航 条 主要 由 一 个 <div> 元 素 和 一 个 <ul> 元 素 嵌 套 而 成 。 其 中 <div> 元 素 用 来 制作 导 
航 部 分 的 背景 ，<ul> 元 素 用 来 制作 导航 条 的 具体 内 容 。 其 具体 的 XHTML 代码 如 下 所 示 。 


<div 1d="navBar"> 
<div id="innerNavBar"> 
<ulid="mainNav"> 
<li><a hre 仁 "#" class="navHome"> 首 页 </a></li> 
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<li><a hre 伍 "#" class="navBlog"> 日 志 </a></li> 
<li><a hre 伍 "#" class="navSound"> 音 乐 </a></li> 
<li><a hre 仁 "#' class="navImg"> 相 册 </a></li> 
<]i><a hre 伍 " 肆 ' class="navProfile"> 档 案 </a></li> 
<]i><a hre 仁 "#" class="navfriend"> 交 友 </a></li> 
<li><a hre 人 pr class="navshipin'> 视 频 </a></i> 
</u> 
<div class="clear"></div> 


</div> 
</div> 


在 上 面 的 XHTML 结构 中 ， 每 个 <li> 元 素 代表 一 个 独立 的 导航 内 容 。 通 过 在 每 个 <li> 元 素 
中 定义 不 同 的 类 属性 ， 可 以 控制 每 个 导航 内 容 的 显示 效果 。 


20.5.2 ”定义 页 面 导 航 的 样式 


导航 的 各 种 表现 效果 ， 主 要 通过 在 导航 条 的 各 个 元 素 中 定义 背景 和 伪 类 实现 的 。 大 体 可 以 
分 为 两 个 部 分 ， 一 部 分 用 来 定义 导航 内 容 的 位 置 和 整体 效果 ， 另 一 部 分 用 来 定义 每 个 导航 鼠标 
巷 停 时 候 的 转换 效果 。 其 中 导航 内 容 位 置 以 及 整体 控制 的 样式 如 下 所 示 。 


454 


#navBar { 
height: 82px; 证 定 义 高 度 为 82 像素 */ 
background-image: url(../images/sohu10_02.gif) 。”/* 添 加 背景 图 片 */; 
background-repeat: no-repeat; /# 背 景 图 片 不 重复 #/ 

1 

#innerNavBar { 
width: 710px: 让 定义 文本 宽度 为 710 像素 */ 
margin-left: 170px: 片 定义 左 侧 边界 属性 值 为 170px*/ 
margin-top: 23px; 上 # 定 义 项 部 边界 属性 值 为 23px*/ 

} 

#mainNav { 
float: left: 语 定 义 文本 内 容 左 标 移 */ 
margin: Opx; 人 # 定 义 边界 综合 属性 为 0*/ 
padding: Opx; 人 # 定 义 综合 补 白 属性 为 0*/ 

} 

#mainNav li { 
float: left: 人 # 定 义 文本 内 容 左 飘 移 包 
list-style: none; 上 # 定 义 不 使 用 列表 符号 类 
margin: Opx: 证 定义 边界 属性 为 0 像素 */ 
padding: 32px Opx 2px; 放 定 义 综合 补 白 为 上 方 32 像素 ， 下 方 2 像素 */ 

} 

#mainNav lia { 
padding: 32px 12px Opx; 人 # 定 义 综合 补 白 为 上 方 32 像素 ， 左 侧 12 像素 */ 
background-position: center top; 放 定 义 背 景 图 片 居 中 靠 上 显示 */ 
background-repeat: no-repeat; /# 定 义 背景 图 片 不 重复 所 
text-decoration: none: /# 定 义 字 体 无 修饰 
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color #EEEEEF /# 定 义 文本 字体 为 白色 关 


在 上 面 的 代码 中 分 别 定义 了 导航 条 的 高 度 、 宽 度 ， 每 个 导航 内 容 之 间 的 距离 以 及 导航 条 中 
文本 所 使 用 的 颜色 等 各 种 内 容 。 为 了 让 导航 条 显示 的 内 容 更 加 丰富 ， 同 时 在 鼠标 悬 停 时 可 以 做 
出 反应 ， 还 需要 对 每 个 链接 进行 进一步 的 定义 ， 具 体 代 码 如 下 所 示 。 


#mainNav navHome { background-image: url(../images/icoMenu home.gif);} 

#mainNav navHome:hover { background-image: url(../images/icoMenu home over.gif);} 

#mainNav navHome-active { background-image: url(../images/icoMenu home over.gif): color: #ffFFFE: cursor: 
default;} 

#mainNav .navBlog { background-image: url(../images/icoMenu blog.gif);} 

#mainNav .navBlog:hover { background-image: url(../images/icoMenu blog over.gif):} 

#mainNav .navBlog-active { background-image: url(../images/icoMenu blog over.gif): color: #fFfFFE: cursor: 
default;} 

#mainNav .navImg { background-image: url(../images/icoMenu img.gif);} 

#mainNav .navImg:hover { background-image: url(../images/icoMenu img over.gif);} 

#mainNav .navImg-active { background-image: url(../images/icoMenu img over.gif); color: #fFFFfE: cursor: 
default;} 

#mainNav .navSound { background-image: wrl(../images/icoMenu sound gif):} 

#mainNav .navSound:hover { background-image: url(../images/icoMenu_sound_over.gif);} 

#mainNav .navSound-active { background-image: url(../images/icoMenu sound over.gif); color: #fFFFFE: cursor: 
default;} 


#mainNav .navVideo { background-image: url(../images/icoMenu video.gif);} 

#mainNav .navVideo:hover { background-image: url(../images/icoMenu video_over.gif):} 

#mainNav .navVideo-active { background-image: url(../images/icoMenu video_over.gif); color: #fFFFFE: cursor: 
default;} 


#mainNav .navProfile { background-image: url(../images/icoMenu profile.gif):} 

#mainNav .navProfile:hover { background-image: url(../images/icoMenu profile_over.gif):} 

#mainNav .navProfile-active { background-image: url(../images/icoMenu profile_over.gif): color: #HEEEEE cursor: 
default;} 


#mainNav .navshipin { background-image: url(../images/video.gif):} 
#mainNav .navshipin:hover { background-image: url(../images/videoblack. gif);} 
#mainNav .navshipin-active { background-image: url(../images/videoblack.gif); color: #f¥FFE: cursor: default:} 


#mainNav .navfriend { background-image: url(../images/friend.gif);} 

#mainNav .navfriend:hover { background-image: url(../images/friendblack. gif):} 

#mainNav .navfriend-active { background-image: url(../images/friendblack. gif); color: #fFFFFE: cursor: default:} 

在 上 面 的 代码 中 , 每 个 导航 内 容 使 用 的 样式 原理 是 相同 的 。 首先 为 元 素 定义 一 个 背景 图 片 ， 
然后 定义 当 鼠 标 悬 停 时 ， 背 景 图 片 转换 为 另 一 个 ， 这 样 就 实现 了 一 种 动态 转换 的 效果 。 定 义 导 
航 内 容 的 样式 后 ， 页 面 的 显示 效果 如 图 20-5 所 示 。 
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图 20-5 导航 条 的 显示 效果 


20.6 | 制作 页 面 主体 


页 面 主体 内 容 由 日 志 内 容 和 侧 栏 内 容 两 个 部 分 组 成 。 由 于 日 志和 侧 栏 部 分 的 内 容 都 有 可 能 
扩展 ， 所 以 在 制作 时 要 将 高 度 定义 为 自动 伸展 。 由 于 日 志 部 分 和 侧 栏 部 分 的 内 容 都 很 多 ， 所 以 
本 节省 略 了 这 两 部 分 的 制作 ， 只 讲解 主体 结构 的 制作 方法 。 


20.6.1 制作 页 面 主体 的 结构 


在 页 面 的 主体 内 容 中 ， 由 于 导航 部 分 的 背景 高 度 比较 高 ， 所 以 要 使 用 负 的 边界 值 ， 将 内 容 


向 上 移动 。 由 于 内 容 位 置 的 原因 ， 在 日 志 部 分 和 侧 栏 部 分 需要 使 用 更 复杂 的 典 套 结构 ， 其 具体 
的 XHTML 代码 如 下 所 示 。 


<div id=" mainWrapper "> 
<div id="content"> 
<div class="innercontent"> 
<! 日 志 部 分 > 
</div></div> 
<div id="sidebar"> 
<div id="innersidebar"> 
<! 侧 栏 部 分 > 
</div></div> 
<div class="clear"></div> 
</div> 


在 上 面 的 XHTML 结构 中 ，innercontent 和 innersidebar 这 两 个 元 素 ， 用 来 移动 亮 部 分 的 位 
置 .由 于 content 元 素 和 sidebar 元 素 需 要 使 用 浮动 属性 同行 显示 , 所 以 需要 添加 一 个 辅助 的 clear 
元 素 ， 去 除 浮动 带 来 的 影响 。 
20.6.2 ”定义 页 面 主体 内 容 的 样式 


页 面 主体 内 容 主要 由 页 面 主体 使 用 的 背景 图 片 ， 以 及 两 个 主要 内 容 的 位 置 显示 效果 构成 
的 。 其 具体 的 代码 如 下 所 示 。 
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#mainWrapper { 
background-image: url( images/sohu10 04.gif): 刻 定 义 添加 背景 图 片 */ 
background-repeat: repeat-y; 居 定 义 背景 图 片 不 重复 六 
width: 993px; 庆 定 义 文本 宽度 为 993 像素 */ 

} 

#sidebar { 
float: right; 片 定义 文本 右 飘 移 */ 
width: 181px; 刻 定 义 文本 宽度 为 181 像素 */ 
overflow: hidden; 人 # 定 义 了 溢出 内 容 显示 效果 为 隐藏 难 
margin-top:-10px; 上 # 定 义 了 顶部 边界 属性 为 - 10 像素 */ 
padding-right: 120px; 人 # 定 义 了 右 侧 补 白 属性 为 120 像素 */ 

由 

#content { 
float: left: /# 定 义 文本 左 飘 移 专 
width: 530px: 庆 定 义 文本 宽度 为 530 像素 */ 
overflow: hidden; /#* 定 义 了 溢出 内 容 显示 效果 为 隐藏 入 
margin-top:-20px; 让 定义 了 顶部 边界 属性 为 - 20 像素 */ 
padding-right: 125px: 人 # 定 义 了 右 侧 补 白 属性 为 125 像素 */ 


} 


在 上 面 的 代码 中 , 使 用 mainWrapper 选择 符 定义 了 页 面 主体 部 分 使 用 的 背景 图 片 ， 以 及 重 
复 的 方式 ， 同 时 定义 了 主体 部 分 的 宽度 。 在 侧 栏 和 内 容 的 部 分 使 用 浮动 属性 定义 了 各 自 的 显示 
位 置 ， 同 时 通过 定义 相应 的 宽度 ， 使 两 个 区 域 处 于 合理 的 位 置 。 接 下 来 定义 两 个 区 域内 容 的 显 
示 大 小 和 方式 。 


#innerContent { 

width: 500px: 店 定 义 文本 宽度 为 500*/ 

overflow: hidden; 人 # 定 义 了 溢出 内 容 显示 效果 为 隐藏 入 
) 
的 nnerSidebar { 


overflow: hidden; 。“”/* 定 义 了 溢出 内 容 显示 效果 为 隐藏 */ 
) 
在 上 面 的 代码 中 ， 主 要 定义 了 内 容 超出 元 素 范围 时 会 被 隐藏 ， 这 样 做 可 以 保证 页 面 显示 效 
果 的 正常 。 定 义 页 面 主体 内 容 样式 后 ， 就 可 以 在 其 中 制作 需要 的 各 种 内 容 了 。 


20.7 | 制作 日 志 


日 志 内 容 主要 由 几 个 重复 的 结构 完成 ， 其 中 需要 注意 的 是 : 控制 各 个 区 域 的 分 隔 距 离 。 另 
外 由 于 日 志 部 分 是 由 几 个 部 分 组 成 的 ， 所 以 还 要 为 每 个 部 分 定义 文本 不 同 的 显示 颜色 。 日 志 内 
容 的 具体 制作 过 程 如 下 所 示 。 
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20.7.1 制作 日 志 内 容 的 结构 


日 志 结构 分 为 3 个 部 分 : 日 志 标题 、 日 志 内 容 和 底部 链接 。 由 于 要 对 3 个 部 分 进行 分 隔 和 
修饰 ， 所 以 要 各 自 使 用 独立 的 元 素 定义 ， 其 具体 的 XHTML 代码 如 下 所 示 。 
<div id=diarytitle><img src="images/spacer.gif" alt="" class="arrow-up" /> 2009-10-20 </div> 
<div id=diarycontent> 很 多 很 黑 的 夜里 ， 很 多 很 亮 的 街灯 ， 弯 曲 着 通 向 远方 :很 多 很 凉 的 清晨 ， 很 多 很 忙 
的 脚步 ， 匆 匆 的 走向 理想 。 许 多 的 挣扎 ， 许 多 的 努力 ， 不 过 为 了 引起 别人 的 注意 ;许多 的 错误 ， 许 多 的 思春 ， 
只 是 为 了 坚守 完整 的 自己 。 世 界 从 来 不 会 因此 而 改变 ， 明 天 也 不 会 因此 变 的 更 好 。 我 们 从 来 不 曾 得 到 ， 也 没有 
什么 可 以 失去 。 生 命 不 过 永恒 黑暗 中 ， 如 惊 鸿 般 灿 烂 的 一 瞬 。 静 静 的 体会 你 生命 中 的 每 一 分 钟 ， 所 有 的 欢笑 ， 
所 有 的 痛苦 ， 所 有 的 阁 心 无 望 的 追求 ， 所 有 的 天 真 纯净 的 笑容 ， 构 成 了 你 的 一 生 。 </div> 
<div id=diarybottom><a hre 合 "> 评论 (0)</a> | <ahre 全 "和 > 固定 链接 </a>| <a hre 全 "和 > 类 别 ( 闲 时 
随笔 ) </a>| 发 表 于 15:44 </div> 
在 上 面 的 XHTML 结构 中 ， 使 用 3 个 <div> 元 素 分 别 定 义 日 志 的 3 个 部 分 内 容 ， 每 个 元 素 
之 间 相 互 独立 。 


20.7.2 定义 日 志 内 容 的 样式 


日 志 部 分 由 3 个 部 分 组 成 ， 日 志 的 标题 、 日 志 的 内 容 、 日 志 的 相关 信息 。 在 每 个 部 分 中 都 
需要 定义 文本 的 显示 方式 和 位 置 ， 其 具体 的 代码 如 下 所 示 。 


#diarytitle{ 
width: 100%; 让 定 义 文本 内 容 全 屏 显示 */ 
floatleft 让 定 义 文本 左 漂移 */ 
font-size:14px; 族 定 义 文本 字体 大 小 为 14 像素 */ 
font-weight:bold; 族 定 义 文本 字体 为 黑体 */ 
color:#eeeeee; 人 # 定 义 字体 为 白色 类 
padding: Spx; 此 定义 文本 综合 补 白 为 5 像素 */ 
border-bottom: 1px dashed #97ACB6: 让 定义 底部 边框 为 线性 宽度 为 1 像素 */ 

上 

#diarycontent{ 
width: 100%%; 让 定 义 文本 内 容 全 屏 显示 */ 
floatleft 上 # 定 义 文本 左 漂移 关 
font-size: 12px; 上 # 定 义 文本 字体 大 小 为 12 像素 */ 
color:#dddddd: 让 定义 字体 颜色 为 浅 灰 色 */ 
padding: Spx; 此 定义 综合 补 白 距 离 是 5px*/ 
line-height: 180%%; 店 定 义 行 高 为 字体 的 1.8 倍 */ 
padding-bottom:15px; 族 定 义 底部 补 白 距 离 是 15px*/ 

} 

#diarybottom{ 
width: 100%%; 
float:left; 片 定义 文本 左 漂移 */ 
font-size:12px; 启 定 义 文本 字体 大 小 为 12 像素 */ 
color:#eeeeee: 话 定 义 字体 为 白色 */ 


padding: 5px; 上 # 定 义 上 下 左右 的 补 白 距 离 是 5px*/ 


458 


制作 个 人 博客 页 面 


在 上 面 的 代码 中 分 别 定义 了 3 个 部 分 文本 的 大 小 、 颜 色 以 及 行 高 等 各 种 属性 ， 然 后 通过 定 


义 边 线 的 方法 制作 了 日 志 内 容 之 间 的 分 割 线 。 定 义 日 志 内 容 样式 后 ， 页 面 的 显示 效果 如 图 20-6 
所 示 。 


一 梦 加 是 -博客 -Yindows Internet Explorer 


EGG 可 
”| E:\web\bloainder. hnl 司 Js+ x s: pl 

文件 中 ”编辑 如 ”查看 收 意 天 内 工具 四 大 和 。 名 smert 周志 

Vindors Live 回 -| | 击 f 更 新 个 人 注 # 邮件 ” 轨 片 >| 回 于 

窗 突 拓 一 区 I 是 -博客 


从- 园 -种 -地 J 虽 -全 IO 


图 20-6 日 志 内 容 的 显示 效果 


20.8 | 制作 侧 栏 


侧 栏 内 容 用 来 显示 相关 的 个 人 信息 、 友 情 链 接 、 日 志 分 类 等 内 容 。 在 这 部 分 内 容 中 ，CSS 


样式 包括 两 个 部 分 ， 一 部 分 是 通用 的 统一 样式 ， 另 一 部 分 是 各 个 内 容 的 独立 样式 。 侧 栏 内 容 的 
具体 制作 方法 如 下 所 示 。 


20.8.1 制作 侧 栏 的 结构 


侧 栏 内 容 包括 : 个 人 档案 、 归 档 信息 、 友 情 链接 、 日 志 分 类 、 推 荐 日 志 、 统 计 信息 等 几 个 


部 分 。 其 中 每 个 部 分 都 是 由 标题 、 内 容 两 个 部 分 构成 ， 根 据 内 容 的 不 同 ， 所 使 用 的 结构 略 有 区 
别 。 侧 栏 部 分 定义 的 XHTML 代码 如 下 所 示 。 


<!-- 个 人 档案 -> 
<div class="panel"> 
<div class="panel-title"> 
<h3><img src="images/spacer.gif' alt="" class="arrow-up" />&nbsp; 个 人 档案 </h3> 
<div class="clear"></div></div> 

<div class="panel-menu"></div> 

<div class="panel-content"> 

<div class="show"> 

<img src-"images/show.jpg" alt=" 用 户头 像 " /></div> 
<hr> 

<div class="profile"> 


昵称 : 倩 倩 <br 亿 位置: 北京 市 <br 广 个 性 介绍 : <br 人 和 天 


fF 心 快乐 的 过 每 一 天 , 锻炼 身体 ， 
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努力 减肥 ! 爸爸 ， 妈 妈 &hellip: 我 好 想 家 ! <br 亡 
<div></div></div> 
<!-- 归 档 -> 
<div class="panel"> 
<div class="panel-title"> 
<h3><img src="images/spacer.gif' alt="" class="arow-up" />&nbsp; 归 档 </h3> 
<div class="clear"></div> 
</div> 
<div class="panel-content"> 
<u> 
<li><a hre 伍 "#"'>2009 年 8 月 </a></li> 
<li><a hre 伍 "#'>2009 年 7 月 </a></li> 
<li><a hre 伍 "#"'>2009 年 6 月 </a></li></ul> 
</div></div> 
<!-- 友 情 链接 -> 
<div class="panel"> 
<div class="panel-title"> 
<h3><img src="images/spacer.gif' alt="" class="arrow-up" />&nbsp; 友 情 链接 </h3> 
<div class="clear"></div></div> 
<div class="panel-content"> 
<div> 暂 无 链接 </div></div></div> 
<!-- 日 志 分 类 -> 
<div class="panel"> 
<div class="panel-title"> 
<h3><img src="images/spacer.gif" alt="" class="arrow-up"” />&nbsp; 日 志 分 类 </h3> 
<div class="clear"></div></div> 
<div class="panel-content"> 
<Ul> 
<li><a hre 伍 "# 人 > 我 的 心情 </a></li> 
<li><a hre 伍 "#'> 闲 时 随笔 </a></li> 
<li><a hre 人 ="##'> 工 作 感 悟 </a></li></ul> 
</div></div> 
<!-- 更 新 的 博客 --> 
<div class="panel"> 
<div class="panel-title"> 
<h3><img src="images/spacer.gif" alt="" class="arrow-up"” />&nbsp; 更 新 的 博客 </h3> 
<div class="clear"></div></div> 
<div class="panel-content" style="width: 175px;"> 
<div class="collect"><a href="#" target=" blank" title=" 美 丽 新 世界 "><img src="images/diary1.jpg" alt=" 美 丽 
新 世界 " /> <span> 美 丽 新 世界 </span></a></div><div class="collect"><a hre 仁 "#" target="” blank" title=" 记 住 永远 
"><img src="images/diary2.jpg" alt=" 告 别 忧伤 " > <span> 记 住 永远 </span></a></div><div class="collect"><a 
href-"W" target="”blank" title=" 爱 的 小 屋 "><img sre-"images/diary3jpg" alt-" 爱 的 小 屋 "人 > <span> 爱 的 小 屋 
</span></a></div></div></div> 
<!-- 统 计 信 息 -> 
<div class="panel"> 
<div class="panel-title"> 
<h3><img src="images/spacer.gif' alt="" class="arow-up” />&nbsp: 统 计 信 息 </h3> 
<div class="clear"></div></div> 
<div class="panel-content"> 
<ul> 
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<] 记 创建 : 2009-09-27</1i> 

<] 记 文章 : 11 篇 < 上 

< 这 评论 : 5 篇 < 

<] 记 访问 : <br 户 
</ul></div></div> 


在 上 面 的 XHTML 结构 中 ,使 用 注释 的 方式 ,标记 了 代码 的 各 个 部 分 。 在 每 个 部 分 中 ， 标 
题 和 文本 都 定义 了 相同 的 类 , 具体 的 内 容 部 分 ,由 于 各 自 独立 的 特点 , 所 以 定义 了 独立 的 样式 。 


20.8.2 ”定义 侧 栏 的 通用 样式 


侧 栏 的 通用 样式 包括 侧 栏 标题 样式 、 侧 栏 文本 样式 、 侧 栏 链接 样式 等 。 这 些 样式 都 是 每 个 
侧 栏 内 容 都 要 使 用 的 样式 。 其 中 侧 栏 每 个 内 容 的 整体 控制 ， 以 及 侧 栏 标题 的 显示 效果 是 通过 下 
面 的 代码 完成 的 ， 具 体内 容 如 下 所 示 。 


.panel { 
margin-bottom: 5px: 上 # 定 义 下 外 边 距 为 5 像素 */ 
line-height:20px; 上 # 定 义 行 高 为 20 像素 */ 
} 
.panel-title{ 
color:-#F4F4F4: 让 定义 文本 颜色 */ 
height: 20px; 上 # 定 义 高 度 为 20 像素 */ 
padding-top: 8px: 上 # 定 义 项 部 边 距 为 8 像素 */ 
1 
.panel-title h3 { 
font-size: 14px; 人 # 定 义 文本 字体 大 小 为 14 像素 */ 
float: left: 族 定义 文本 左 浮动 */ 
margin: Opx; 上 # 定 义 所 有 外 边 距 为 0*/ 
padding-top: 3px 0px 0px 5px; 。”* 定 义 上 外 边 距 为 3 像素 、 左 和 下 外 边 距 为 0 像素 * 右 外 边 距 为 5*/ 
-panel-titleh3 a { 
font-size: 14px: 让 定义 字体 大 小 为 14 像素 */ 
.panel-menu{ 
padding-right: 3px: 人 # 定 义 了 右 侧 补 白 属性 为 3 像素 */ 
padding-left: 3px: 旋 定 义 了 左 侧 补 白 属性 为 3 像素 */ 
float: right: 刻 定 义 了 文本 由 浮动 */ 


} 


接 下 来 定义 侧 栏 内 容 的 显示 效果 ， 内 容 主 要 由 一 些 列 表 和 相应 的 链接 组 成 的 ， 其 中 定义 的 
有 具体 代码 如 下 所 示 。 


-panel-title{ 
color-#F4F4F4; 庆 定 义 文本 颜色 为 白色 沁 
height: 20px: 广 定 义 高 度 为 20 像素 */ 
padding-top: 8px: 片 定义 顶部 边 距 为 8 像素 */ 
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在 上 面 的 代码 中 ， 分 别 定义 了 内 容 显 示 的 空间 、 颜 色 、 鼠 标 悬 停 效 果 、 分 割 线 、 图 片 的 显 
示 方 式 、 列 表 的 显示 效果 等 。 定 义 完 相应 的 样式 后 ， 页 面 的 显示 效果 如 图 20-7 所 示 。 


一 芬 如 是 -博客 一 下 TInternet Erplarer 


图 20-7 定义 侧 栏 样式 后 的 显示 效果 


20.8 | 制作 页 面 底 部 内 容 


页 面 底部 内 容 包括 站 点 的 相关 信息 、 邮 箱 地 址 、 欢 迎 口号 等 。 在 制作 页 面 底部 内 容 的 时 候 ， 
只 需要 对 各 个 文本 和 图 片 元 素 进行 定位 ， 同 时 定义 好 链接 文本 的 显示 效果 即 可 。 制 作 页 面 底部 
内 容 的 具体 步骤 如 下 所 示 。 
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20.9.1 制作 页 面 底部 的 结构 


页 面 底部 内 容 主要 由 一 些 文本 内 容 构成 ， 在 这 里 为 了 方便 ， 使 用 表格 制作 了 各 种 内 容 。 其 
具体 的 代码 如 下 所 示 。 

<div id="footer"> 

<div id="innerFooter"><table id="contact"><tr><td rowspan="2"></td><td nowrap="nowrap" align="left"><a 

hre 伍 "#" target="” blank"> 客 服 论坛 </a>&nbsp:&nbsp:&nbsp:&nbsp: 客 服 邮 箱 : <a 
href="mailto:##">*******(@*****.com</a></td></tr><tr><td nowrap="nowrap" align="left">24 小 时 客服 热 
线 :##*#*#-#######( 人 工 8:00-24:00)</td></tr></table><div id="copyright">Copyright &copy; 2009 ***** com Inc. All 
rights reserved. *** 网 版 权 所 有 </div></div></div> 


由 于 底部 信息 很 少 ， 而 且 只 是 一 些 数据 ， 所 以 可 以 选择 使 用 表格 显示 这 些 数据 ， 这 样 可 以 
使 内 容 的 显示 更 加 方便 ， 同 时 也 不 影响 页 面 的 维护 。 
20.9.2 定义 页 面 底部 的 样式 


页 面 底部 内 容 主要 包括 几 个 部 分 ， 首 先是 页 面 底部 的 背景 ， 然 后 是 各 个 内 容 显示 的 位 置 ， 
最 后 是 各 种 内 容 的 颜色 。 其 具体 的 代码 如 下 所 示 。 


#footer { 
clear: both; 启 清 除 底部 的 漂浮 属性 */ 
background-image: ul(../images/sohul0_10.gif); 证 在 页 面 中 添加 图 片 */ 
background-repeat: no-repeat; 上 背景 图 片 不 重复 */ 
height: 165px: 上 # 定 义 底部 高 度 为 165 像素 */ 

| 

#innerFooter{ 
color: #f4f4 人 4; 店 定 义 字体 颜色 为 亮 白 色 */ 
padding-top: 86px: /#* 顶 部 补 白 86 像素 */ 
text-align: center; 旋 定 义 文字 居中 */ 

. 

#innerFooter a{ 
color: #f4f4f4:; 上 # 定 义 字体 颜色 为 亮 白色 沁 
text-decoration:none; 让 定 义 字体 无 装饰 */ 

} 

#innerFooter a:hover{ 
color:#F5651F; 店 定 义 字体 颜色 为 橘红 色 */ 
text-decoration:underline; 店 定 义 字体 下 划 线 */ 

) 

热 ontact { 
margin: Opx auto; 片 定义 上 下 外 边 距 为 0 像素， 左右 外 边 距 自动 */ 
margin-bottom: 15px; 记 定 义 边界 底部 15 像素 */ 
width: 400px: 启 定 义 文本 宽度 为 400 像素 */ 

上 

#contact td { 
color: #fAf4f4:; 话 定 义 字体 颜色 为 亮 白 色 */ 
padding: 0 10px; 上 定义 上 、 下 侧 补 白 为 0 像素 ， 左 、 右 侧 补 白 10 像素 */ 
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跟 我 学 HTML+CSS 


#contacta { 
color: #f4f4f4: 话 定 义 字体 颜色 为 亮 白 色 */ 
text-decoration: underline; 庆 定 义 字体 下 划 线 属性 状 
} 
#contact a:hover { 
color: #5651F:; 刻 定 义 字体 颜色 为 懋 红色 */ 
由 


在 上 面 的 代码 中 首先 定义 了 底部 内 容 的 高 度 ， 为 了 能 够 显示 出 整个 底部 使 用 的 背景 图 片 。 
然后 定义 了 内 容 显 示 的 颜色 和 显示 的 位 置 。 接 下 来 定义 了 链接 内 容 的 显示 效果 。 最 后 对 联系 方 


式 的 部 分 进行 了 进一步 修饰 。 定 义 页 面 底部 样式 后 ， 页 面 的 显示 效果 如 图 20-8 所 示 。 
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图 20-8 定义 页 面 底部 样式 后 的 显示 效果 
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